「前端学习」DOM事件委托

事件委托（Event Delegation）: 由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。
优点:

• 减少内存消耗，提高性能

假设有100个button, 我们需要在点击每个button的时候响应一个事件.

    <div id="div1">
        <button>button 1</button>
        <button>button 2</button>
        <button>button 3</button>
        ......
        <button>button n</button>
    </div>

如果给每个button一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。借助事件委托，我们只需要给父容器div绑定方法即可，这样不管点击的是哪一个后代元素，都会根据事件冒泡传播的传递机制，把容器的click行为触发，然后把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而完成不同的事。
js代码:

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

• 动态绑定事件

在很多时候，我们需要通过用户操作动态的增删列表项元素，如果一开始给每个子元素绑定事件，那么在列表发生变化时，就需要重新给新增的元素绑定事件，给即将删去的元素解绑事件，如果用事件代理就会省去很多这样麻烦。

假设: 有一个button是延迟1秒生成出来的, 这样可以通过事件委托的方式来监听button的click.

<div id="div1"></div>

setTimeout(()=>{
  const button = document.createElement("button")
  button.textContent = "cilck 1"
  div1.appendChild(button)
}, 1000)

div1.addEventListener("click", (e)=>{
  const t = e.target
  if(t.tagName.toLowerCase() === "button"){
    console.log("button被点击了.")
  }
})