js中的事件委託實例淺析,前端事件委託

本文目錄一覽：

• 1、JS-阻止冒泡事件與事件委託
• 2、細說什麼是js中的事件冒泡和事件捕獲以及事件委託
• 3、javascript 中的事件委派的作用是什麼

JS-阻止冒泡事件與事件委託

事件冒泡：開始時由最具體的元素接收，然後逐級向上傳播到到 DOM 最頂層節點。

1.標準寫法：利用事件對象裡面的 stopPropagation()方法

e.stopPropagation()

2.非標準寫法：IE 6-8 利用事件對象 cancelBubble 屬性

e.cancelBubble = true;

事件委託也稱為事件代理， 在 jQuery 裡面稱為事件委派。 不是每個子節點單獨設置事件監聽器，而是事件監聽器設置在其父節點上，然後利用冒泡原理影響設置每個子節點。

如：給 ul 註冊點擊事件，然後利用事件對象的 target 來找到當前點擊的 li，因為點擊 li，事件會冒泡到 ul 上，ul 有註冊事件，就會觸發事件監聽器，這裡只操作了一次 DOM ，提高了程序的性能。

細說什麼是js中的事件冒泡和事件捕獲以及事件委託

如下一段代碼：有2個div，外部是div1，內部是div2，

 div id=”div1″ onclick=”alert(‘1’)”

         div id=”div2″ onclick=”alert(‘2’)”

test

         /div

     /div

假設在div2內部進行點擊，那麼：冒泡事件認為：你點擊了div2，而div2在div1里內部，所以，也點擊了div1，因此執行順序是 「div2-div1-body」 ，由內往外一步步向上，這很像水裡有一個魚吐了一個水泡，這個水泡往上飄一樣，所以叫做「冒泡事件」

而事件捕獲認為：你點擊div2，因為div1在div2外部，所以，div1先捕獲到，然後再傳遞給div2，所以，事件執行順序是「body-div1-div2」，這就像你進去房間，必須先進入大院，再進入門一樣。

其實，2個都有一定的道理，目前，泡沫事件更合理，所以瀏覽器默認使用冒泡順序，但是可以通過JS參數設置到底是用冒泡還是捕捉。

javascript 中的事件委派的作用是什麼

所謂事件委託，就是讓一個下屬分別乾的事情交給上司辦了。比如說，滑鼠點擊事件，本來頁面上有很多的滑鼠點擊事件，需要一個個的去寫實現函數，但是如果你把滑鼠點擊事件交個上司來完成，那麼就是你滑鼠點擊那裡的時候，就相當於上司找對應的下屬來完成此事件，而不像前面的一個個的去找實現函數。很簡單的例子就是給ul中的li加事件：

ul id=”ul1″

li111/li

li222/li

li333/li

li444/li

/ul

如果給每個li添加點擊事件：

var li=document.getElementsByTagName(‘li’);

for(var i=0;ili.length;i++)

alert(li[i].innerHTML);

要是用事件委託

var ul=document,getElementById(‘ul1’)

var target = ;ul.target || ul.srcElement; //兼容處理

alert(target,innerHTML);

這樣做的好處就是不在進行查詢，減少了DOM操作，極大地改善了代碼性能。