js
事件机制在开发中可以说时刻使用,例如dom
绑定事件、监听其自身事件等。js
事件机制有事件捕获、事件冒泡俩种机制,我们分别说下这俩种机制的使用场景。
一、概念
事件捕获顺序如下:
window
> document
> body
> div
事件冒泡顺序如下:
div
> body
> document
> window
可以看到事件捕获是从最外层元素开始,依次向内部元素传播,直到目标元素。而事件冒泡相反,从目标元素,依次向外部元素传播,直到最外层元素
在JavaScript中,我们可以使用addEventListener方法来绑定捕获和冒泡事件,下面俩种方式都可以,第三个参数默认为布尔值false
,设为true
则为捕获机制,默认为冒泡机制,也可以为object
element.addEventListener(event, handler, option);
element.addEventListener(event, handler, capture);
option
包含如下可选属性:
属性 | 作用 |
---|---|
capture | 设置为捕获机制 |
once | 只调用一次 |
passive | 一个布尔值,设置为 true 时,表示 listener 永远不会调用 preventDefault() |
signal | AbortSignal,该 AbortSignal 的 abort() 方法被调用时,监听器会被移除 |
二、实践
事件冒泡:
<div class="div1">
<div class="div2">
<button>click me</button>
</div>
</div>
<script>
let div1 = document.querySelector('.div1')
let div2 = document.querySelector('.div2')
let