从事件传播冒泡阶段到事件委托：简化事件处理体验

前端

2023-10-30 10:28:53

事件传播：冒泡与捕获

当用户与网页中的元素交互时，就会触发事件。这些事件可以通过addEventListener()方法注册事件处理程序，并由浏览器按照特定的顺序触发。事件传播的顺序分为两个阶段：冒泡阶段和捕获阶段。

冒泡阶段： 事件从最内层元素开始向外传播，直到达到文档对象模型(DOM)的根元素。在这个阶段，事件处理程序会按顺序执行，最内层的元素的事件处理程序会先执行，然后是其父元素的事件处理程序，依次类推。
捕获阶段： 与冒泡阶段相反，事件传播从最外层元素开始向内传播，直到达到触发事件的元素。在这个阶段，事件处理程序也会按顺序执行，但最外层的元素的事件处理程序会先执行，然后是其子元素的事件处理程序，依次类推。

事件委托：简化事件处理

事件委托是一种通过将事件处理程序注册在父元素上，然后在事件处理程序中使用事件对象来确定触发事件的元素，从而简化事件处理的机制。这样，就不需要为每个子元素注册单独的事件处理程序，而只需为父元素注册一个事件处理程序即可。

事件委托的优点在于：

提高性能： 减少了事件处理程序的数量，从而提高了网页的性能。
简化代码： 代码更简洁，更容易维护。
提高灵活性： 当子元素发生变化时，无需修改事件处理程序，只需在事件处理程序中使用事件对象来确定触发事件的元素即可。

使用事件委托的步骤

为父元素注册事件处理程序。
在事件处理程序中，使用事件对象来确定触发事件的元素。
根据触发事件的元素执行相应的操作。

举个例子

以下代码演示了如何使用事件委托来简化事件处理：

<div id="outer_div">
  <div id="inner_div">
    <button id="button">Click me</button>
  </div>
</div>

document.getElementById("outer_div").addEventListener("click", function(event) {
  if (event.target.id === "button") {
    alert("Button clicked");
  }
});