前言

事件委托，也叫事件代理，是js事件中的一種常用技巧。
事件委托的原理就是利用冒泡事件的機制，為一些節點的祖先節點指定事件處理方法，當子節點觸發事件時，從觸發事件的節點向上冒泡，直到傳遞至document。在冒泡的過程中，會觸發祖先節點設定好的事件處理函數，可用來處理一系列相似事件。

事件委托的實現與優點

比如在一個<ul>當中，有100個<li>元素，當我們想讓每個li元素在被點擊的時候，輸出li元素內的文本。
不用事件委托時，大概是這樣處理

let list=document.querySelectorAll('ul li')
for(let v of list){
  v.onclick=function(){
    console.log(this.innerText)
  }
}

這樣的方法雖然能達成目標，但是為每個節點添加事件，效率太低；并且如果在ul中新加入li元素，又要為新加入的節點添加該事件，很麻煩。
這時，事件委托就是一個比較好的事件處理方法了。
事件委托里有一個重要的屬性target，target 事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文檔或窗口。

ul.onclick=function(e){
  console.log(e.target)        //輸出點擊的節點
}

這樣就可以只為li元素的父元素指定事件處理方法，來處理所有li子元素的事件了。

let ul=document.querySelector('ul')
ul.onclick=function(e){
  console.log(e.target.innerText)
}

使用事件委托之后，后添加的li子元素也自動擁有該事件處理功能，并不需要為其另外添加事件處理功能。

為一系列特定的元素事件委托

有的時候，我想用事件委托去進行事件處理，但是我只想處理特定的節點的事件。舉個栗子，比如一個div元素中，有50個p元素，50個span元素，我只希望當p元素被點擊時輸出該元素內容，這時可以加入一定條件過濾。

let div=document.querySelector('div')
div.onclick=function(e){
  if(e.target.nodeName=='P'){
    console.log(e.target.innerText)
  }
}

只舉個栗子，其他的情況，可以自由發揮。

target和currentTarget的區別

target返回觸發事件的元素
currentTarget返回綁定事件的元素

在上面的例子中，target返回當前點擊的元素，currentTarget返回綁定事件的元素，即div元素