js的事件的代理和委托

lewif 發(fā)布于2019-08-20 14:19 / 3053人閱讀

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

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


  1
  2
  3

我現(xiàn)在有一個列表，想彈出每個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);
  });
}

這個做法已經(jīng)實現(xiàn)了想要的效果，但是試想一種情景

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

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

這樣寫使代碼變得簡潔了，且沒有了大量的循環(huán)，節(jié)省了內(nèi)存，可以說是一舉兩得。
這種委托父元素執(zhí)行事件，并利用事件冒泡的原理執(zhí)行子元素相應(yīng)函數(shù)的方法就叫事件的代理，或者叫事件的委托。

GPU云服務(wù)器云服務(wù)器 js事件委托什么是js 事件委托委托事件事件委托

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

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

相關(guān)文章

js 事件委托事件代理

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

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

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

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

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

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

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

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

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

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