js的事件的代理和委托

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

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

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


  1
  2
  3

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

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

我現(xiàn)在有10000個(gè)li，要是做一個(gè)循環(huán)給每個(gè)li都加事件，簡直是太耗性能了，于是事件的代理或者說委托就登場了。其實(shí)就是利用事件的冒泡原理來實(shí)現(xiàn)的。我點(diǎn)擊一個(gè)元素，這個(gè)事件會(huì)沿著文檔樹一直向上傳，直到根元素document。然后我給想要加事件的元素的父元素加上點(diǎn)擊事件，委托它執(zhí)行，然后再判斷是它后代元素中的哪個(gè)元素觸發(fā)的，運(yùn)行相應(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ù)的方法就叫事件的代理，或者叫事件的委托。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81544.html

相關(guān)文章

js 事件委托事件代理

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

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

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

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

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

yunhao 2019-08-21 10:38 評(píng)論0 收藏0
【筆記】事件委托（即事件代理）知識(shí)點(diǎn)

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

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

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

wuaiqiu 2019-08-23 16:28 評(píng)論0 收藏0