什么是事件冒泡
在一個對象上觸發(fā)某類事件(比如單擊onclick事件),如果此對象定義了此事件的處理程序沽翔,那么此事件就會調用這個處理程序兢孝,如果沒有定義此事件處理程序或者事件返回true,那么這個事件會向這個對象的父級對象傳播仅偎,從里到外跨蟹,直至它被處理(父級對象所有同類事件都將被激活),或者它到達了對象層次的最頂層橘沥,即document對象(有些瀏覽器是window)窗轩。
事件冒泡的作用
事件冒泡允許多個操作被集中處理(把事件處理器添加到一個父級元素上,避免把事件處理器添加到多個子級元素上)座咆,它還可以讓你在對象層的不同級別捕獲事件痢艺。
事件委托就是利用冒泡的原理,把事件加到父級上介陶,通過判斷事件來源的子集堤舒,執(zhí)行相應的操作,事件委托首先可以極大減少事件綁定次數(shù)哺呜,提高性能舌缤;其次可以讓新加入的子元素也可以擁有相同的操作。
一般綁定事件的寫法
$(function(){
$ali = $('#list li');
$ali.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>
事件委托的寫法
$(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>