JavaScript之事件委托實例(附原生js和jQuery代碼)
事件委托的原理依賴于事件冒泡，可以通過給父元素的事件委托來確定是哪個子元素觸發(fā)了事件從而做一系列操作。
使用事件委托的優(yōu)點
1、操作子元素時不用一一遍歷，可以根據事件觸發(fā)的對象而進行相應操作
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的值。
在我們還沒有學事件委托的時候我們會遍歷所有l(wèi)i并給它們添加一個click事件，比如這樣：
var aLi = document.getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++) // 遍歷li
aLi[i].addEventListener('click', 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; // 觸發(fā)事件的對象保存在事件的target里面
console.log(tag.innerHTML);
})
jQuery代碼如下：
$('#oUl').on('click', '.item', function() {
console.log($(this).html()); // this指向oUl中觸發(fā)了click事件并且class為item的子元素
})
相比之下，事件委托只需要獲取父元素并且不需要遍歷li，效率提高了不少。
2、將事件委托給父元素后，動態(tài)創(chuàng)建（刪除）的子元素不用重新綁定（解綁）事件，實現了元素與事件的同步更新
在以往的js事件監(jiān)聽中，用js動態(tài)創(chuàng)建的子元素是沒有事件的，必須重新為它們綁定事件，但是用事件委托就不用這么麻煩了，不需要重新綁定事件依舊可以實現事件監(jiān)聽。
當然事件綁定也是有弊端的，因為它依賴于事件冒泡，如果不支持冒泡那么就不能實現事件綁定了，不過我認為這種幾率還是不高的。還有就是會發(fā)生事件誤判，比如頁面中的button1和button2的作用是點擊時彈出值，而button3的作用是點擊是頁面變色，這三個button的同一個事件實現功能不同，當你將click事件委托給它們共同的父元素那么就會出現事件誤判。
所以我認為事件委托是發(fā)生在一個子集合的事件功能相同的情況下，如果不相同則不要使用事件委托，以免弄巧成拙。
在實際開發(fā)中，掌握事件綁定對于代碼的規(guī)范性以及效率會有一定提高，總的來說利大于弊。
以上這篇JavaScript之事件委托實例(附原生js和jQuery代碼)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了bootstrap modal彈出框的垂直居中，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JS使用正則表達式除去字符串中重復字符的方法,以一個簡單實例分析了JavaScript中正則過濾的相關使用技巧,需要的朋友可以參考下2015-11-11
javascript在firefox下設為首頁的代碼...2007-09-09
這篇文章主要為大家詳細介紹了js實現簡單放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了JavaScript中return false的用法,在大多數情況下,為事件處理函數返回false,可以防止默認的事件行為,需要的朋友可以參考下2015-03-03
bootstrap+jQuery實現的動態(tài)進度條功能示例
這篇文章主要介紹了bootstrap+jQuery實現的動態(tài)進度條功能,結合完整實例形式分析了bootstrap+jQuery實現動態(tài)進度條的具體步驟與相關操作技巧,需要的朋友可以參考下2017-05-05
JavaScript自執(zhí)行函數和jQuery擴展方法詳解
這篇文章主要為大家詳細介紹了JavaScript自執(zhí)行函數和jQuery擴展方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了Js中將Long轉換成日期格式的實現方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
CKEditor擴展插件：自動排版功能autoformat插件實現方法詳解
這篇文章主要介紹了CKEditor擴展插件：自動排版功能autoformat插件實現方法,結合實例形式詳細分析了CKEditor擴展插件實現自動排版功能的autoformat插件具體定義、配置與使用技巧,需要的朋友可以參考下2020-02-02
JavaScript實現常用二級省市級聯(lián)下拉列表的方法
這篇文章主要介紹了JavaScript實現常用二級省市級聯(lián)下拉列表的方法,實例分析了javascript實現級聯(lián)下拉列表的技巧與相關的元素操作方法,需要的朋友可以參考下2015-03-03