透过DOM事件流的本质，精通事件委托！

前端

2023-11-09 16:03:09

DOM事件流：揭开事件传播的奥秘

DOM事件流是网页事件传播的机制。当用户在网页中执行操作时，例如点击按钮或移动鼠标，就会触发DOM事件。事件从触发元素开始传播，并沿着DOM树向上冒泡，直到到达文档根节点。在这个过程中，所有祖先节点都会依次收到事件通知，并有机会处理事件。

事件冒泡 是DOM事件流的默认行为。它意味着事件从触发元素开始，逐层向上传播，直到到达文档根节点。在事件冒泡过程中，每个祖先节点都可以通过事件处理程序来处理事件。

事件捕获 是DOM事件流的另一种行为。它意味着事件从文档根节点开始，逐层向下捕获，直到到达触发元素。在事件捕获过程中，每个祖先节点都可以通过事件处理程序来处理事件。

事件委托：巧妙应对事件繁杂的局面

事件委托是一种优化事件处理的技巧，可以提高网页性能。它的原理是将事件处理程序绑定到祖先节点上，而不是绑定到每个子孙节点上。当事件从触发元素冒泡或捕获到祖先节点时，事件处理程序就会被触发，并判断当前事件是否需要处理。

事件委托的优点是：

减少了事件处理程序的数量，从而提高了网页性能。
简化了事件处理的代码，使代码更易于维护。
提高了事件处理的灵活性，可以动态地添加或删除事件处理程序。

实战演练：运用事件委托优化网页性能

以下代码演示了如何在JavaScript中使用事件委托来优化网页性能：

const parentElement = document.getElementById('parent');

parentElement.addEventListener('click', (event) => {
  const targetElement = event.target;

  if (targetElement.classList.contains('child')) {
    // 执行针对子元素的事件处理逻辑
  }
});

在这个代码中，我们使用addEventListener()方法将一个事件处理程序绑定到了父元素上。当父元素或其任何子元素被点击时，事件处理程序就会被触发。然后，我们可以通过event.target属性来获取触发事件的元素，并判断它是否属于子元素。如果属于子元素，则执行针对子元素的事件处理逻辑。