昨天遇到一段js代码里面的addEventListener方法竟然有三个参数,去谷歌搜了一下,觉得这个概念很有意思,值得总结一下写成博客。
useCapture
addEventListener()中的第三个参数是Boolean类型的值,代表第二个参数handler是否在第一个参数Event的capture阶段使用。
事件(Event)在事件目标(EventTarget)中的顺序
当DOM元素之间有包含关系时,发生在其上的事件有两种顺序:
- Capturing
- Bubbling
Capturing就是从上往下:
| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 \ / | |
| ------------------------- |
| Event CAPTURING |
-----------------------------------
这种情况下,事件发生后,注册在element1上的handler会先触发,注册在element2上的handler会后触发。
Bubbling就是从下往上:
/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
这种情况下,事件发生后,注册在element2上的handler会先触发,注册在element1上的handler会后触发。
W3C标准中的事件顺序
| | / \
-------