事件的委托

委托

1. 事件委托是什么？

a. 事件委托又称事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

b. 事件委托的实现是根据事件冒泡实现的,利用事件冒泡的特性。对于父元素使用事件监听，当父盒子里面的某个元素被触发时，向上冒泡，触发父元素的事件。利用 target 后去触发冒泡事件的元素。 ⅰ. 举个栗子：一个div里有100个 button，给没个button添加点击事件

div1.addEventListener("click", (e) => {
  const t = e.target;
  if (t.tagName.toLowerCase() === "button") {
    console.log("button被点击了");
    console.log("button内容是" + t.textContent);
    console.log("button data-id 是" + t.dataset.id);
  }
});

ii.监听动态元素（目前不存现的元素）：在很多时候，我们需要通过用户操作动态的增删子元素，如果一开始给每个子元素绑定事件，那么在列表发生变化时，就需要重新给新增的元素绑定事件，给即将删去的元素解绑事件，如果用事件委托就会省去很多这样麻烦。

1. 举个栗子

<div id='div'></div>
setTimeout(() => {
  const button = document.createElement("button");
  button.textContent = "click1";
  div1.appendChild(button);
}, 1000);
事件委托的函数
function on(eventType, element, selector, fn) {
  //eventType事件类型比如click
  //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);
    }
  });
}
on("click", "#div2", "button", () => {
  console.log("button被点击了");
});

2.优点： a. 省监听数（省内存） b. 可以监听动态元素 注意：事件委托需要依赖事件冒泡，如果不支持事件冒泡的元素没办法使用事件委托。