事件委托

2023/03/03

星期五

| |

---

事件委托：又可以称作事件代理，顾名思义，事件委托就是委托别的元素来代替自己监听事件的行为。

事件委托的原理是事件冒泡，利用事件的冒泡机制，在具有冒泡行为的事件上，子元素的事件触发会逐级冒泡到其父元素上，因此可以通过监听父元素的触发事件来实现对子元素事件的委托。

优点:

1. 减少了大量的事件注册，减少内存使用

2. 新增元素实现自动绑定，可以多次绑定同一个时间，不会覆盖上一次的事件

比较常用的场景：

• 在需要对大量子元素事件进行监听时，为了节省监听数来达到节省内存，可以通过监听其父元素来实现

<ul id="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<script>
  // 与其对li逐个监听，可以使用委托其父元素完成一次监听
  parent.addEventListener("click", (e) => {
    if (e.target.nodeName === "LI") {
      // 对点击的li元素的逻辑处理
    }
  });
</script>

• 监听动态生成的元素

<div id="parent"></div>
<button id="addChild"></button>
<script>
  //对于动态生成的元素，事件监听无法事先对未生成的元素进行监听，这种情况可以通过委托其父元素完成
  addChild.addEventListener("click", (e) => {
    const child = document.createElement("div");
    parent.appendChild(child);
  });

  parent.addEventListener("click", (e) => {
    if (e.target.className === "child") {
      e.target.innerHTML = "改变内容";
    }
  });
</script>