JS 事件代理

什么是事件代理

JS事件代理就是通过给父级元素（例如：ul,tr等等）绑定事件，不给子级元素（例如:li,td等等）绑定事件，然后当点击子级元素时，通过事件冒泡机制在其绑定的父元素上触发事件处理函数，主要目的是为了提升性能，因为我不用给每个子级元素绑定事件，只给父级元素绑定一次就好了，在原生js里面就是通过event对象的taget属性实现。

事件代理的原理是DOM元素的事件冒泡，那么事件冒泡是什么呢？

一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段

• 事件传播分成三个阶段：
  • 捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
  • 目标阶段：在目标节点上触发，称为“目标阶段”
  • 冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

事件代理的优点

• 可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒
• 可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

事件基本实现

const ul = document.querySelector('.list');
const lis = ul.querySelectorAll('li');

ul.addEventListener('click',(event) => {
    const target = event.target;
    alert(target);
});