js的事件的代理和委托

lewif 發布于2019-08-20 14:19 / 3051人閱讀

摘要：本文要解釋一下事件的代理或者說委托的概念，首先直接上定義事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。這種委托父元素執行事件，并利用事件冒泡的原理執行子元素相應函數的方法就叫事件的代理，或者叫事件的委托。

本文要解釋一下JavaScript事件的代理或者說委托的概念，首先直接上定義：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。上來就看定義，可能有點懵，所以到了最重要的解析部分。


  1
  2
  3

我現在有一個列表，想彈出每個li里的值，一般的做法是

var list = document.getElementById("list");
var liArr = list.getElementsByTagName("li");
for (var i = 0; i < liArr.length; i++) {
  liArr[i].addEventListener("click", function () {
    alert(this.innerHTML);
  });
}

這個做法已經實現了想要的效果，但是試想一種情景

我現在有10000個li，要是做一個循環給每個li都加事件，簡直是太耗性能了，于是事件的代理或者說委托就登場了。其實就是利用事件的冒泡原理來實現的。我點擊一個元素，這個事件會沿著文檔樹一直向上傳，直到根元素document。然后我給想要加事件的元素的父元素加上點擊事件，委托它執行，然后再判斷是它后代元素中的哪個元素觸發的，運行相應函數。廢話不多說，直接上代碼。

document.getElementById("list").addEventListener("click", function (evt) {
  if (evt.target.tagName.toUpperCase() === "LI") {
    alert(this.innerHTML);
  }
});

這樣寫使代碼變得簡潔了，且沒有了大量的循環，節省了內存，可以說是一舉兩得。
這種委托父元素執行事件，并利用事件冒泡的原理執行子元素相應函數的方法就叫事件的代理，或者叫事件的委托。

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

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

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

js 事件委托事件代理

摘要：事件委托事件代理高級程序設計上解釋事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。事件委托原理事件委托是利用事件的冒泡原理來實現的，事件冒泡就是事件從最深的節點開始，然后逐級向上傳播事件。 js 事件委托事件代理 JavaScript高級程序設計上解釋：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。通過例子類比：有...

widuu 2019-08-23 14:44 評論0 收藏0
JavaScript 事件代理和委托

摘要：原文地址事件代理和委托在中這個詞經常出現，看字面的意思，代理委托。模型將事件處理流程分為三個階段一事件捕獲階段，二事件目標階段，三事件起泡階段。事件目標當到達目標元素之后，執行目標元素該事件相應的處理函數。原文地址：JavaScript 事件代理和委托在javasript中delegate這個詞經常出現，看字面的意思，代理、委托。那么它究竟在什么樣的情況下使用？它的原理又是什么？在...

littlelightss 2019-08-22 10:39 評論0 收藏0
淺談Javascript事件委托（代理）

摘要：開玩笑啦，提供一種方法叫做事件委托。途中經過各個層次的，并在各上觸發捕獲事件，直到到達時間的目標。懂得了事件冒泡的過程，就很容易明白事件委托的運作原理。首先祝大家七夕快樂。。假如現在有一個的列表，里面可能會有若干個列表項。現在要為每一個列表項綁定相同的點擊事件，現在你可能會有這幾種做法：手動為每一個列表項綁定事件；在onload的時候，找到該列表，對其每一個子元素進行遍歷，循環...

yunhao 2019-08-21 10:38 評論0 收藏0
【筆記】事件委托（即事件代理）知識點

摘要：事件委托就是事件目標自身不處理事件，而是把處理任務委托給其父元素或者祖先元素，甚至根元素。事件委托原理事件委托就是利用事件冒泡原理實現的！事件冒泡：就是事件從最深節點開始，然后逐步向上傳播事件；例：頁面上有一個節點樹，div > ul > li > a 比如給最里面的a 加一個click事件，那么事件就會一層一層的往外執行，執行順序 a > li > ul > div...

forrest23 2019-08-20 17:28 評論0 收藏0
JS - 關于事件委托中的事件冒泡

摘要：結構如下項目名稱項目名稱列篩選圖標代碼如下點擊列篩選圖標這種事件委托的事件綁定方式，在這里出現了事件冒泡，雖然調用了，但仍然會觸發綁定在上的排序事件。在使用 Datatables 表格插件開發過程中，給每一列的表頭增加了自定義的列篩選功能，具體是給表頭增加了一個可點擊的圖標，點擊圖標觸發篩選，但是發現點擊圖標的時候同時會觸發 Datatables 自帶的排序功能。 showImg(h...

wuaiqiu 2019-08-23 16:28 評論0 收藏0