js事件委托

前言

事件委托，也叫事件代理，是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元素