菜品点击，事件互斥有妙招，JS事件机制大揭秘！
2023-09-07 15:58:13
JS 事件机制：掌控网页交互
概述：捕捉网页事件，提升用户体验
想象一下浏览网站时，当你点击按钮、移动鼠标或按下键盘时会发生什么。网页会立即响应，这是因为 JavaScript（JS）事件机制在后台发挥作用。JS 事件机制是一种巧妙的系统，它使你的网页能够对用户的输入做出反应。
事件机制流程：从捕获到冒泡
JS 事件机制由三个阶段组成，称为事件捕获阶段、目标阶段和事件冒泡阶段。让我们分解一下每个阶段：
- 事件捕获阶段： 事件从最外层的网页元素开始，逐级向下传播到目标元素，沿途经过每个元素。
- 目标阶段： 当事件到达目标元素时，即用户实际点击、移动或按下的元素时，它会触发该元素的事件处理程序。
- 事件冒泡阶段： 从目标元素开始，事件再次向上传播，逐级经过每个元素，直到到达最外层的网页元素。
事件冒泡与捕获：控制事件传播
默认情况下，事件会向上冒泡。然而，你还可以选择事件捕获，这意味着事件会从最外层元素向下传播。通过在 addEventListener() 方法中设置 capture 参数为 true，可以启用事件捕获。
事件委托：简化事件处理
事件委托是一种在父元素上附加事件处理程序的技巧，而不是在目标元素上附加。当父元素收到事件时，它会将事件委托给适当的子元素。这可以解决事件互斥问题，即当多个元素重叠时，点击一个元素会导致多个事件被触发。
阻止事件传播：控制用户交互
有时，你可能需要阻止事件在 DOM（文档对象模型）树中向上冒泡或向下捕获。可以使用 event.stopPropagation() 和 event.stopImmediatePropagation() 方法来实现这一点。这两个方法可以用来阻止事件处理程序的默认行为。
总结：驾驭网页交互
掌握 JS 事件机制是提升网页用户体验的关键。通过了解事件捕获、冒泡和委托，以及控制事件传播，你可以创建对用户输入高度响应的动态网页。
常见问题解答
-
事件机制的目的是什么？
JS 事件机制使网页能够对用户交互做出反应，例如点击、移动鼠标和按下键盘。 -
事件冒泡如何运作？
事件从目标元素向上传播到最外层的网页元素。 -
事件捕获与冒泡有什么区别？
事件捕获从最外层的网页元素向下传播到目标元素，而事件冒泡则从目标元素向上传播。 -
如何使用事件委托？
在父元素上附加事件处理程序，而不是在目标元素上附加。 -
event.stopPropagation()和event.stopImmediatePropagation()方法有什么区别？
event.stopPropagation()阻止事件在 DOM 树中向上冒泡，而event.stopImmediatePropagation()阻止事件在 DOM 树中向上冒泡和向下捕获。
代码示例：
// 捕获点击事件并打印到控制台
document.body.addEventListener('click', function(event) {
console.log('点击了页面！');
}, true);
// 使用事件委托处理列表中的点击事件
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
const item = event.target;
console.log(`点击了列表项 ${item.textContent}`);
});
