- 自定義事件
除了系統(tǒng)事件外，可以通過bind方法自定義事件，然后用tiggle方法觸發(fā)這些事件。
//給element綁定hello事件
element.bind("hello",function(){
alert("hello world!");
});
//觸發(fā)hello事件
element.trigger("hello");
- 事件冒泡
- 什么是事件冒泡*
在一個對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調(diào)用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。
事件冒泡的作用
事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可以讓你在對象層的不同級別捕獲事件。
阻止事件冒泡
事件冒泡機制有時候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
- 事件委托
事件委托的寫法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function(event) {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
```
取消事件委托
```
// ev.delegateTarge 委托對象
$(ev.delegateTarge).undelegate();
// 上面的例子可使用 $list.undelegate();
```
4. jquery元素節(jié)點操作
創(chuàng)建節(jié)點
```
var $div = $('<div>');
var $div2 = $('<div>這是一個div元素</div>');
```
插入節(jié)點
```
1、append()和appendTo()：在現(xiàn)存元素的內(nèi)部，從后面插入元素
var $span = $('<span>這是一個span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>
```
2、prepend()和prependTo()：在現(xiàn)存元素的內(nèi)部，從前面插入元素
3、after()和insertAfter()：在現(xiàn)存元素的外部，從后面插入元素
4、before()和insertBefore()：在現(xiàn)存元素的外部，從前面插入元素
刪除節(jié)點
```
$('#div1').remove();
```
append和appendTo的區(qū)別
append(content)方法
方法作用：向每個匹配的元素內(nèi)部追加內(nèi)容。
參數(shù)介紹：content (<Content>): 要追加到目標(biāo)中的內(nèi)容。
用法示例：
HTML代碼為<p>I come from </p><p>I love </p>
向所有p標(biāo)簽中追加一個單詞china，則寫法為 $("p").append("china");
結(jié)果為：<p>I come from china</p><p>I love china </p>
appendTo(expr)方法
方法作用：把所有匹配的元素追加到指定的元素元素集合中。
參數(shù)介紹：expr (String): 用于匹配元素的jQuery表達式。
用法示例：
HTML代碼為<b>I love china </b><p></p>
把標(biāo)簽b追加到p元素中，寫法為$("b").appendTo("p");
結(jié)果為：><p><b>I love china </b></p>
使用appendTo這個方法是顛倒了常規(guī)的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中
刪除節(jié)點
```
$('#div1').remove();
```
作者：王學(xué)文
鏈接：http://www.itdecent.cn/u/6a0f050f3f39
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。