如何让事件先冒泡后捕获
时间: 2024-03-10 12:46:54 浏览: 11
在 HTML DOM 事件模型中,事件流分为三个阶段:捕获阶段、目标阶段和冒泡阶段。默认情况下,事件先经过捕获阶段,然后到达目标阶段,最后才进入冒泡阶段。如果要让事件先冒泡后捕获,可以通过设置事件处理程序的第三个参数 useCapture 为 true,这样事件将在捕获阶段被处理,然后才进入目标和冒泡阶段。例如:
```html
<div id="outer">
<div id="inner">
Click me
</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
// 先冒泡后捕获
outer.addEventListener('click', function() {
console.log('Outer bubble');
}, false);
inner.addEventListener('click', function() {
console.log('Inner bubble');
}, false);
outer.addEventListener('click', function() {
console.log('Outer capture');
}, true);
inner.addEventListener('click', function() {
console.log('Inner capture');
}, true);
</script>
```
在这个例子中,当我们点击 inner 元素时,事件的处理顺序是:Outer capture -> Inner capture -> Inner bubble -> Outer bubble。