JavaScript之事件委托的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下JavaScript之事件委托的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

祥云網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),祥云網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為祥云上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的祥云做網(wǎng)站的公司定做！

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

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

1、操作子元素時不用一一遍歷，可以根據(jù)事件觸發(fā)的對象而進行相應(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>

當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)建（刪除）的子元素不用重新綁定（解綁）事件，實現(xiàn)了元素與事件的同步更新

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

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

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

在實際開發(fā)中，掌握事件綁定對于代碼的規(guī)范性以及效率會有一定提高，總的來說利大于弊。

以上是“JavaScript之事件委托的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：JavaScript之事件委托的示例分析-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://bm7419.com/article44/dschhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、品牌網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、網(wǎng)站改版、企業(yè)網(wǎng)站制作、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容