事件委托

事件委托也称事件代理，在jQuery里面就称为事件委派。

事件委托就是把事件监听放在祖先元素（如父元素、爷爷元素）上。

由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理。

事件委托的原理

不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利事件用冒泡的原理影响设置每个子节点

事件委托作用

绑定事件越多，浏览器内存占用越大，严重影响性能

只操作一次DOM，提高程序的性能

假设有一个列表，列表之中有100个列表项，我们需要在点击每个列表项的时候响应一个事件。以前的做法就是利用for循环给每个列表项添加点击事件，这样对于内存的消耗非常大，性能差。因此借助事件代理，提高程序性能。

<ul>
  <li>dianwo1</li>
  <li>dianwo2</li>
  <li>dianwo3</li>
    ...
  <li>dianwo100</li>
</ul>

借助事件代理的方法：不需要再每个li项里面添加点击事件，只需要给父容器ul绑定方法即可，不管点击哪个li项，都会根据冒泡传播的传递机制，触发点击事件，执行对应的处理方法，根据事件源e.target，我们可以知道点击的是谁，从而完成不同的事。

事件委托实现

<ul>
  <li>dianwo</li>
  <li>dianwo</li>
  <li>dianwo</li>
  <li>dianwo</li>
  <li>dianwo</li>
</ul>
​
let ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
  e.target.style.color='pink'
  //e.target 得到点击的那个对象
})

target 与 currentTarget 的区别：

• e.target: 用户操作的元素
• e.currentTarget: 程序员监听的元素
• 比如上例中，e.target 就是 li ，e.currentTarget 就是 ul

以上代码中，并没有给每一个元素绑定事件，只是给父节点ul绑定事件，但是点击每一个li时，可以变换其样式。

事件委托的优点：

1.减少事件注册，节省内存。

• 在table上代理所有td的click事件。
• 在ul上代理所有li的click事件。

2.可以监听动态生成的元素。

• 不用在新添加的li上绑定click事件。
• 当删除某个li时，不用移解绑上面的click事件。