阅读量:3
JavaScript 事件冒泡（Event Bubbling）和事件捕获（Event Capturing）是描述事件如何在 DOM（文档对象模型）树中传播的两种机制
- 事件捕获：
事件捕获是从根节点（通常是
document对象）开始，逐级向下捕获子元素上的事件。当事件触发时，首先执行最外层的捕获事件处理程序，然后逐层向内进行，直到到达目标元素。事件捕获阶段可以通过addEventListener方法的第三个参数（capture）来设置，将其设置为true即可启用捕获模式。
示例：
document.addEventListener('click', function(event) {
console.log('捕获阶段');
}, true);
element.addEventListener('click', function(event) {
console.log('目标元素');
}, false);
- 事件冒泡：
事件冒泡是从目标元素开始，逐级向上传播到根节点。当事件触发时，首先执行目标元素的事件处理程序，然后逐层向外进行，直到到达根节点。事件冒泡阶段可以通过
addEventListener方法的第三个参数（capture）来设置，将其设置为false或省略该参数（默认为false）即可启用冒泡模式。
示例：
element.addEventListener('click', function(event) {
console.log('目标元素');
}, false);
document.addEventListener('click', function(event) {
console.log('冒泡阶段');
}, false);
总结：事件冒泡和事件捕获是描述事件在 DOM 树中传播顺序的两种机制。事件捕获从根节点开始，逐级向下捕获子元素上的事件；而事件冒泡从目标元素开始，逐级向上传播到根节点。通过设置 addEventListener 方法的第三个参数，可以选择启用捕获模式或冒泡模式。
以上就是关于“JavaScript事件冒泡和捕获如何工作”的相关介绍，筋斗云是国内较早的云主机应用的服务商，拥有10余年行业经验，提供丰富的云服务器、租用服务器等相关产品服务。云服务器资源弹性伸缩，主机vCPU、内存性能强悍、超高I/O速度、故障秒级恢复；电子化备案，提交快速，专业团队7×24小时服务支持！
简单好用、高性价比云服务器租用链接：https://www.jindouyun.cn/product/cvm