事件委托

理论上，当存在给上百个按钮添加点击事件，或者你监听当前不存在(过一段事件出现)的元素的点击事件，怎么做才是最好的选择。同时在大量的按钮上响应一个点击事件，会消耗非常多的内存，效率十分的低下；此外，当需要给用户操作增加或删除某个元素的时候，每个子元素绑定事件，那么新增出现的元素也要重新绑定事件，即将删除的元素需要解绑事件。
上面的两种情况，都可以使用事件委托的方式来解决，由于事件会在冒泡阶段向上传播直到根节点，那么可以将子节点的监听函数定义在其父节点上，由父节点统一监听处理多个子元素的的事件。

减少内存消耗，提高性能
不需要给子节点注销事件下面为一个简单的事件委托示例。

  <body>
    <div id="div1"></div>
    <script src="main.js"></script>
  </body>

setTimeout(() => {
  const button = document.createElement("button");
  const span = document.createElement("span");
  span.textContent = "click 1";
  button.appendChild(span);
  div1.appendChild(button);
}, 5000);
on("click", "#div1", "button", () => {
  console.log("button被点击了");
});
function on(eventType, element, selector, fn) {
  if (!(element instanceof Element)) {
    element = document.querySelector(element);
  }
  element.addEventListener(eventType, (e) => {
    const t = e.target;
    if (t.matches(selector)) {
      fn(e);
    }
  });
}

DOM事件委托

事件委托