js事件委托詳解

GeekQiaQia 發布于2019-08-22 14:56 / 1577人閱讀

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

先說事件流

js的事件流分為3個階段：捕獲、目標、冒泡。即事件來了，先從上到下傳播（捕獲），到達目標節點（目標），然后在往上傳播（冒泡）。看下圖：

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

demo長這樣：

html:

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)

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

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)

結果為：wraper li3 span
同時還可以測試，某一個事件在捕獲階段是優先觸發于冒泡階段的：

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)

結果為：li3 span wraper

從需求出發

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

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

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

GPU云服務器云服務器 js事件委托什么是js 事件委托 js事件詳解委托事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93013.html

js事件詳解

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

BDEEFE 2019-08-19 17:56 評論0 收藏0
js事件委托詳解

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

Sleepy 2019-08-01 18:39 評論0 收藏0
jQuery 事件用法詳解

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

shiina 2019-08-19 18:36 評論0 收藏0
js事件冒泡和事件捕獲

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

SimonMa 2019-08-29 12:33 評論0 收藏0
js事件冒泡和事件捕獲

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

raoyi 2019-08-20 16:25 評論0 收藏0