事件冒泡、事件委托

事件冒泡:

在一個對象上觸發(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>

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容