js事件委托詳解

Sleepy 發(fā)布于2019-08-01 18:39 / 399人閱讀

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

先說事件流

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

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

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)

可以看到，這里全是在冒泡階段觸發(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
同時(shí)還可以測(cè)試，某一個(gè)事件在捕獲階段是優(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ā)

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

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

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