JavaScript中關於事件委託的原生JS以及jQuery實例程式碼分享

下面小編就為大家帶來一篇JavaScript之事件委託實例(附原生js和jQuery程式碼)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

事件委託的原理依賴於事件冒泡，可以透過給父元素的事件委託來確定是哪個子元素觸發了事件從而做一系列操作。

使用事件委託的優點

#1、操作子元素時不用一一遍歷，可以根據事件觸發的物件而進行對應運算

dom結構如下：

<ul id = "oUl">
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li>
 <li class = "item"></li> 
 <li class = "item"></li>
</ul>

當li被點選時，列印該li的值。

在我們還沒有學事件委託的時候我們會遍歷所有li並給它們添加一個click事件，例如這樣：

var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++) // 遍历li
 aLi[i].addEventListener(&#39;click&#39;, function() { //给每个li添加事件
 console.log(this.innerHTML); 
 });

學習了事件委託之後js原生程式碼如下：

var oUl = document.getElementById('oUl');
oUl.addEventListener('click', function(ev) {
 ev = ev||window.event;
 var tag = ev.target; // 触发事件的对象保存在事件的target里面
 console.log(tag.innerHTML);
})

#jQuery程式碼如下：

##

$('#oUl').on('click', '.item', function() { 
 console.log($(this).html()); // this指向oUl中触发了click事件并且class为item的子元素
})

相較之下，事件委託只需要取得父元素且不需要遍歷li，效率提高了不少。

2、將事件委託給父元素後，動態建立（刪除）的子元素不用重新綁定（解綁）事件，實現了元素與事件的同步更新

在以往的js事件監聽中，用js動態建立的子元素是沒有事件的，必須重新為它們綁定事件，但是用事件委託就不用這麼麻煩了，不需要重新綁定事件依舊可以實現事件監聽。

當然事件綁定也是有弊端的，因為它依賴於事件冒泡，如果不支持冒泡那麼就不能實現事件綁定了，不過我認為這種幾率還是不高的。還有就是會發生事件誤判，例如頁面中的button1和button2的作用是點擊時彈出值，而button3的作用是點擊是頁面變色，這三個button的同一個事件實現功能不同，當你將click事件委託給它們共同的父元素那麼就會出現事件誤判。

所以我認為事件委託是發生在一個子集合的事件功能相同的情況下，如果不相同則不要使用事件委託，以免弄巧成拙。

在實際開發中，掌握事件綁定對於程式碼的規範性以及效率會有一定提高，總的來說利大於弊。

以上是JavaScript中關於事件委託的原生JS以及jQuery實例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！