成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js事件委托詳解

Sleepy / 401人閱讀

摘要：先說事件流的事件流分為個階段捕獲目標(biāo)冒泡。如果是每個都去多帶帶綁定事件明顯不科學(xué)，畢竟去拿列表也是畢竟消耗性能的，同時每個事件綁定的回調(diào)函數(shù)也會占用大量的內(nèi)存。那如果有動態(tài)插入的元素呢于是委托就可以用上了。

先說事件流

js的事件流分為3個階段：捕獲、目標(biāo)、冒泡。即事件來了，先從上到下傳播（捕獲），到達(dá)目標(biāo)節(jié)點（目標(biāo)），然后在往上傳播（冒泡）?？聪聢D：

我們可以在綁定事件的時候指定指是在哪個階段觸發(fā)事件，element.addEventListener(event, function, useCapture)，useCapture默認(rèn)為false，即默認(rèn)在冒泡階段觸發(fā)事件，來做個測試：

demo長這樣：

html:

    

        wraper
        
    
            
  • li1
    • 
            
  • li2
    • 
            
  • 
                li3
                span
            
    •

js：

document.getElementById("wraper").addEventListener("click",function(e){
    console.log("wraper")
},false)

document.getElementById("li3").addEventListener("click",function(e){
    console.log("li3")
},false)

document.getElementsByTagName("span")[0].addEventListener("click",function(){
    console.log("span")
},false)

可以看到，這里全是在冒泡階段觸發(fā)事件，因此結(jié)果為：span li3 wraper 這樣的順序（從下到上），以此類推，如果全部設(shè)置為捕獲階段觸發(fā)事件呢？順序肯定就反過來了，繼續(xù)看下面：

document.getElementById("wraper").addEventListener("click",function(e){
    console.log("wraper")
},true)

document.getElementById("li3").addEventListener("click",function(e){
    console.log("li3")
},true)

document.getElementsByTagName("span")[0].addEventListener("click",function(){
    console.log("span")
},true)

結(jié)果為：wraper li3 span
同時還可以測試，某一個事件在捕獲階段是優(yōu)先觸發(fā)于冒泡階段的：

document.getElementById("wraper").addEventListener("click",function(e){
    console.log("wraper")
},false)

document.getElementById("li3").addEventListener("click",function(e){
    console.log("li3")
},true)

document.getElementsByTagName("span")[0].addEventListener("click",function(){
    console.log("span")
},false)

結(jié)果為：li3 span wraper

從需求出發(fā)

來了這樣一個需求：在上面的demo中，要給ul下的每個li綁定一個事件，在點擊之后觸發(fā)。
如果是每個li都去多帶帶綁定事件？明顯不科學(xué)，畢竟去拿li列表也是畢竟消耗性能的，同時每個事件綁定的回調(diào)函數(shù)也會占用大量的內(nèi)存。
你可能會說，我的元素不多，上面的消耗無所謂。那如果有動態(tài)插入的元素呢？
于是委托就可以用上了。

document.getElementById("wraper").addEventListener("click", function (e) {
  var target = e.target
  if (target.nodeName.toLocaleLowerCase() === "li") {
    console.log(target.innerHTML);
  }
});

這里的e.target指的時候鼠標(biāo)最后點擊的元素。在這個demo中，點擊深紅色的span，e.target就指的是span,如果點擊li3且不在紅色的span中，那么e.target指li3。
有一個問題就是如果匹配的元素需要更具體一些，比如class為li-test的某個li,就需要做優(yōu)化處理了。后面專門來一篇文章講。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51929.html

相關(guān)文章

  • js事件詳解

    摘要：事件流事件流描述的是從頁面中接收事件的順序。其次，必須事先指定所有事件處理程序而導(dǎo)致的訪問次數(shù)，會延遲整個頁面的交互就緒時間。 1.事件流 事件流描述的是從頁面中接收事件的順序。 1.1 事件冒泡 IE中的事件流叫做冒泡，即時間最開始由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點，直到傳播到document對象。例： Event Exampple ...

    BDEEFE 評論0 收藏0

  • js事件委托詳解

    摘要：先說事件流的事件流分為個階段捕獲目標(biāo)冒泡。如果是每個都去單獨綁定事件明顯不科學(xué)，畢竟去拿列表也是畢竟消耗性能的，同時每個事件綁定的回調(diào)函數(shù)也會占用大量的內(nèi)存。那如果有動態(tài)插入的元素呢于是委托就可以用上了。 先說事件流 js的事件流分為3個階段：捕獲、目標(biāo)、冒泡。即事件來了，先從上到下傳播（捕獲），到達(dá)目標(biāo)節(jié)點（目標(biāo)），然后在往上傳播（冒泡）?？聪聢D： showImg(https://s...

    GeekQiaQia 評論0 收藏0

  • jQuery 事件用法詳解

    摘要：只觸發(fā)事件解除事件任然會執(zhí)行自定義事件把多個事件組合起來，或者在特定條件下觸發(fā)事件，普通的事件綁定是無法滿足需要的，可以通過自定義事件來形成組合。 jQuery 事件用法詳解 簡介 jquery 之所以成為最受歡迎的前端庫，很大一部分是得益于它的事件具有良好的語義，優(yōu)秀的兼容性，并且便于管理和擴(kuò)展。 在這里我會介紹 jquery 事件的一些比較基礎(chǔ)的用法。 實現(xiàn)原理 jquery 事件...

    shiina 評論0 收藏0

  • js事件冒泡和事件捕獲

    摘要：查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理 前段時間開發(fā)一個小項目的時候遇到一個問題，即給一個元素以及它的父元素綁定了click事件，這個時候我點擊這個元素時，父級元素的clik事件也會觸發(fā)，這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。 事件冒泡：事件從...

    SimonMa 評論0 收藏0

  • js事件冒泡和事件捕獲

    摘要：查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理 前段時間開發(fā)一個小項目的時候遇到一個問題，即給一個元素以及它的父元素綁定了click事件，這個時候我點擊這個元素時，父級元素的clik事件也會觸發(fā)，這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。 事件冒泡：事件從...

    raoyi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<