请解释浏览器的事件模型。事件捕获和事件冒泡有什么区别？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

事件捕获阶段

事件捕获阶段是事件传播的第一个阶段。事件从 window 对象开始，沿着 DOM 树向下传播，直到到达目标元素。在这个过程中，事件会依次触发每个祖先元素上的捕获事件处理程序。

例如，假设有以下 HTML 结构：

<div id="outer">
  <div id="inner">
    <button id="target">Click me</button>
  </div>
</div>

如果在 outer 和 inner 元素上都注册了捕获事件处理程序，那么在点击 target 按钮时，事件会首先触发 outer 的捕获事件处理程序，然后触发 inner 的捕获事件处理程序，最后到达 target 元素。

目标阶段

目标阶段是事件传播的第二个阶段。在这个阶段，事件到达目标元素，并触发目标元素上的事件处理程序。

事件冒泡阶段

事件冒泡阶段是事件传播的最后一个阶段。事件从目标元素开始，沿着 DOM 树向上传播，直到到达 window 对象。在这个过程中，事件会依次触发每个祖先元素上的冒泡事件处理程序。

继续上面的例子，如果在 outer 和 inner 元素上都注册了冒泡事件处理程序，那么在点击 target 按钮时，事件会首先触发 target 元素上的事件处理程序，然后触发 inner 的冒泡事件处理程序，最后触发 outer 的冒泡事件处理程序。

事件捕获与事件冒泡的区别

传播方向：事件捕获是从外向内传播，而事件冒泡是从内向外传播。
触发顺序：事件捕获阶段先于事件冒泡阶段触发。
默认行为：默认情况下，事件处理程序是在冒泡阶段触发的，但可以通过设置 addEventListener 的第三个参数为 true 来在捕获阶段触发事件处理程序。

示例代码

// www.javascriptcn.com code example
document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer element captured');
}, true);

document.getElementById('inner').addEventListener('click', function() {
  console.log('Inner element captured');
}, true);

document.getElementById('target').addEventListener('click', function() {
  console.log('Target element clicked');
});

document.getElementById('inner').addEventListener('click', function() {
  console.log('Inner element bubbled');
});

document.getElementById('outer').addEventListener('click', function() {
  console.log('Outer element bubbled');
});

在这个例子中，点击 target 按钮时，控制台输出的顺序将是：

Outer element captured
Inner element captured
Target element clicked
Inner element bubbled
Outer element bubbled

请解释浏览器的事件模型。事件捕获和事件冒泡有什么区别？

推荐答案