快捷導(dǎo)航

JavaScript之事件委托實(shí)例(附原生js和jQuery代碼)

更新時(shí)間：2017年07月22日 09:59:36 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JavaScript之事件委托實(shí)例(附原生js和jQuery代碼)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

事件委托的原理依賴于事件冒泡，可以通過(guò)給父元素的事件委托來(lái)確定是哪個(gè)子元素觸發(fā)了事件從而做一系列操作。

使用事件委托的優(yōu)點(diǎn)

1、操作子元素時(shí)不用一一遍歷，可以根據(jù)事件觸發(fā)的對(duì)象而進(jìn)行相應(yīng)操作

dom結(jié)構(gòu)如下：

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

當(dāng)li被點(diǎn)擊時(shí)，打印該li的值。

在我們還沒(méi)有學(xué)事件委托的時(shí)候我們會(huì)遍歷所有l(wèi)i并給它們添加一個(gè)click事件，比如這樣：

var aLi = document.getElementsByTagName('li');

for(var i = 0; i < aLi.length; i++) // 遍歷li
 aLi[i].addEventListener('click', function() { //給每個(gè)li添加事件
 console.log(this.innerHTML); 
 });

學(xué)了事件委托之后js原生代碼如下：

var oUl = document.getElementById('oUl');

oUl.addEventListener('click', function(ev) {
 ev = ev||window.event;
 var tag = ev.target; // 觸發(fā)事件的對(duì)象保存在事件的target里面
 console.log(tag.innerHTML);
})

jQuery代碼如下：

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

相比之下，事件委托只需要獲取父元素并且不需要遍歷li，效率提高了不少。

2、將事件委托給父元素后，動(dòng)態(tài)創(chuàng)建（刪除）的子元素不用重新綁定（解綁）事件，實(shí)現(xiàn)了元素與事件的同步更新

在以往的js事件監(jiān)聽(tīng)中，用js動(dòng)態(tài)創(chuàng)建的子元素是沒(méi)有事件的，必須重新為它們綁定事件，但是用事件委托就不用這么麻煩了，不需要重新綁定事件依舊可以實(shí)現(xiàn)事件監(jiān)聽(tīng)。

當(dāng)然事件綁定也是有弊端的，因?yàn)樗蕾囉谑录芭?，如果不支持冒泡那么就不能?shí)現(xiàn)事件綁定了，不過(guò)我認(rèn)為這種幾率還是不高的。還有就是會(huì)發(fā)生事件誤判，比如頁(yè)面中的button1和button2的作用是點(diǎn)擊時(shí)彈出值，而button3的作用是點(diǎn)擊是頁(yè)面變色，這三個(gè)button的同一個(gè)事件實(shí)現(xiàn)功能不同，當(dāng)你將click事件委托給它們共同的父元素那么就會(huì)出現(xiàn)事件誤判。

所以我認(rèn)為事件委托是發(fā)生在一個(gè)子集合的事件功能相同的情況下，如果不相同則不要使用事件委托，以免弄巧成拙。

在實(shí)際開(kāi)發(fā)中，掌握事件綁定對(duì)于代碼的規(guī)范性以及效率會(huì)有一定提高，總的來(lái)說(shuō)利大于弊。

以上這篇JavaScript之事件委托實(shí)例(附原生js和jQuery代碼)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: