dom2级事件的冒泡和捕获你写一个代码给我看看 分析注释
时间: 2024-02-01 16:14:09 浏览: 32
当一个元素触发了某个事件,该事件会在该元素上进行处理,然后向上冒泡到父元素,一直到达文档根节点。同时,事件也可以被捕获,即从文档根节点一直向下传递到触发事件的元素。这种事件传递方式称为事件流,而DOM2级规定了事件流的三个阶段:捕获阶段、目标阶段和冒泡阶段。
以下是一个简单的示例代码:
HTML:
```
<div id="outer">
<div id="inner">
Click me!
</div>
</div>
```
JS:
```
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
// 添加点击事件监听器,第三个参数为true表示在捕获阶段处理事件
outer.addEventListener('click', function() {
console.log('outer capture');
}, true);
inner.addEventListener('click', function() {
console.log('inner capture');
}, true);
inner.addEventListener('click', function() {
console.log('inner bubble');
});
outer.addEventListener('click', function() {
console.log('outer bubble');
});
```
当我们点击“Click me!”时,控制台会输出以下内容:
```
outer capture
inner capture
inner bubble
outer bubble
```
首先,事件由文档根节点开始,向下传递到outer元素,触发outer元素的捕获阶段事件监听器,输出“outer capture”。接着,事件继续向下传递到inner元素,触发inner元素的捕获阶段事件监听器,输出“inner capture”。然后,事件到达inner元素,触发inner元素的目标阶段事件监听器,输出“inner bubble”。最后,事件向上冒泡到outer元素,触发outer元素的冒泡阶段事件监听器,输出“outer bubble”。