事件传播是前端开发中非常关键的一个概念，了解事件传播和冒泡阶段以及如何使用事件委托可以帮助我们更好地管理和优化代码。
事件传播和冒泡阶段
当一个事件在 DOM 中触发时，它会沿着 DOM 树向下传播，直到到达最底层的节点。然后，它将返回并沿着相同的路径向上传播，这就是事件传播的过程。在这个过程中，事件有三个阶段：捕获阶段、目标阶段和冒泡阶段。
- 捕获阶段：事件从最外层的节点开始传递到目标元素的祖先节点。
- 目标阶段：事件已经到达目标元素。
- 冒泡阶段：事件从目标元素的祖先节点返回到最外层的节点。
默认情况下，事件传播采用冒泡阶段。也就是说，当事件触发后，先执行目标元素的事件处理程序，然后再执行它的父元素的事件处理程序，以此类推，直到文档的根节点。
事件委托
事件委托是利用事件冒泡机制，将事件处理程序绑定到其祖先元素而不是直接绑定到子元素上。这种技术可以有效地减少事件处理器的数量并提高性能。
例如，我们有一个列表，其中有多个项。如果我们想要为每个项都添加点击事件监听器，那么我们需要为每个项分别添加事件监听器。但是，如果我们使用事件委托，我们只需要将事件监听器添加到整个列表上，并在事件传播期间检查事件源是否是我们关心的项。如果是，则执行我们的操作。
<ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
const list = document.getElementById('list');
list.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
console.log(`Clicked on ${event.target.textContent}`);
}
});在上面的示例中，我们将 click 事件监听器添加到列表元素上，并在列表被点击时打印出被点击的项的文本内容。
总结
了解事件传播和冒泡阶段以及如何使用事件委托可以帮助我们更好地管理和优化前端代码。通过将事件监听器添加到祖先元素上，我们可以减少事件处理器的数量并提高性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8807
