温馨提示×

JavaScript事件冒泡和捕获如何工作

小樊
84
2024-11-01 23:39:08
栏目: 编程语言

JavaScript 事件冒泡(Event Bubbling)和事件捕获(Event Capturing)是描述事件如何在 DOM(文档对象模型)树中传播的两种机制

  1. 事件捕获: 事件捕获是从根节点(通常是 document 对象)开始,逐级向下捕获子元素上的事件。当事件触发时,首先执行最外层的捕获事件处理程序,然后逐层向内进行,直到到达目标元素。事件捕获阶段可以通过 addEventListener 方法的第三个参数(capture)来设置,将其设置为 true 即可启用捕获模式。

示例:

document.addEventListener('click', function(event) {
  console.log('捕获阶段');
}, true);

element.addEventListener('click', function(event) {
  console.log('目标元素');
}, false);
  1. 事件冒泡: 事件冒泡是从目标元素开始,逐级向上传播到根节点。当事件触发时,首先执行目标元素的事件处理程序,然后逐层向外进行,直到到达根节点。事件冒泡阶段可以通过 addEventListener 方法的第三个参数(capture)来设置,将其设置为 false 或省略该参数(默认为 false)即可启用冒泡模式。

示例:

element.addEventListener('click', function(event) {
  console.log('目标元素');
}, false);

document.addEventListener('click', function(event) {
  console.log('冒泡阶段');
}, false);

总结:事件冒泡和事件捕获是描述事件在 DOM 树中传播顺序的两种机制。事件捕获从根节点开始,逐级向下捕获子元素上的事件;而事件冒泡从目标元素开始,逐级向上传播到根节点。通过设置 addEventListener 方法的第三个参数,可以选择启用捕获模式或冒泡模式。

0