欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2017年07月22日 09:59:36   投稿:jingxian  
下面小編就為大家?guī)硪黄狫avaScript之事件委托實例(附原生js和jQuery代碼)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

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

1、操作子元素時不用一一遍歷,可以根據(jù)事件觸發(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)建(刪除)的子元素不用重新綁定(解綁)事件,實現(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之事件委托實例(附原生js和jQuery代碼)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • 指定區(qū)域的圖片自動按比例縮小的js代碼(防止頁面被圖片撐破)

    指定區(qū)域的圖片自動按比例縮小的js代碼(防止頁面被圖片撐破)

    有時候我們更新的內容,有很多的大圖片,就會導致頁面變形或看不到全圖。一般情況我們用css的max-width控制,但有些瀏覽器不支持,我們也可以用js做個補充
    2014-02-02
  • 淺析JavaScript預編譯和暗示全局變量

    淺析JavaScript預編譯和暗示全局變量

    這篇文章主要介紹了JavaScript預編譯和暗示全局變量的相關資料,幫助大家更好的理解和學習JavaScript,感興趣的朋友可以了解下
    2020-09-09
  • 基于JavaScript實現(xiàn)移動端無限加載分頁

    基于JavaScript實現(xiàn)移動端無限加載分頁

    這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)移動端無限加載分頁,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • JavaScript實現(xiàn)郵箱后綴提示功能的示例代碼

    JavaScript實現(xiàn)郵箱后綴提示功能的示例代碼

    這篇文章主要介紹了JavaScript實現(xiàn)郵箱后綴提示功能的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2018-12-12
  • JS Input里添加小圖標的兩種方法

    JS Input里添加小圖標的兩種方法

    大家在做網(wǎng)站的時候,經(jīng)常需要在input里面添加小圖標功能,看似功能很簡單,但是實現(xiàn)起來還是有點技巧的,下面小編給大家介紹下JS Input里添加小圖標的兩種方法,需要的朋友參考下吧
    2017-11-11
  • js解決movebox移動問題

    js解決movebox移動問題

    這篇文章主要為大家詳細介紹了js解決movebox移動問題,取消圖片默認拖動事件,感興趣的小伙伴們可以參考一下
    2016-03-03
  • JavaScript實現(xiàn)點擊圖片換背景

    JavaScript實現(xiàn)點擊圖片換背景

    這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)點擊圖片換背景,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • php輸出全部gb2312編碼內的漢字方法

    php輸出全部gb2312編碼內的漢字方法

    下面小編就為大家?guī)硪黄猵hp輸出全部gb2312編碼內的漢字方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • 利用Vconsole和Fillder進行移動端抓包調試方法

    利用Vconsole和Fillder進行移動端抓包調試方法

    這篇文章主要介紹了利用Vconsole和Fillder進行移動端抓包調試,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • 原生javascript制作的拼圖游戲實現(xiàn)方法詳解

    原生javascript制作的拼圖游戲實現(xiàn)方法詳解

    這篇文章主要介紹了原生javascript制作的拼圖游戲實現(xiàn)方法,結合實例形式詳細分析了JavaScript制作拼圖游戲的相關步驟、原理、實現(xiàn)方法及相關操作注意事項,需要的朋友可以參考下
    2020-02-02

最新評論