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