浏览器的捕获过程和冒泡过程

15 min read

浏览器的捕获过程和冒泡过程

捕获过程跟冒泡过程总是先后发生

以下代码展示了事件传播顺序：

<body>
  <input id="i"/>
</body>
document.body.addEventListener("mousedown", () => {
  console.log("key1")
}, true)

document.getElementById("i").addEventListener("mousedown", () => {
  console.log("key2")
}, true)

document.body.addEventListener("mousedown", () => {
  console.log("key11")
}, false)

document.getElementById("i").addEventListener("mousedown", () => {
  console.log("key22")
}, false)

我们监听了body和一个body的子元素上的鼠标按下事件，捕获和冒泡分别监听，可以看到，最终产生的顺序是：

“key1”

“key2”

“key22”

“key11”

addEventListener 添加事件

  • 事件名称；

  • 事件处理函数；

  • 捕获还是冒泡。

事件处理函数不一定是函数，也可以是个JavaScript具有handleEvent方法的对象，看下例子：

var o = {
  handleEvent: event => console.log(event)
}
document.body.addEventListener("keydown", o, false);

第三个参数不一定是bool值，也可以是个对象，它提供了更多选项。

once：只执行一次。

passive：承诺此事件监听不会调用preventDefault，这有助于性能。

useCapture：是否捕获（否则冒泡）。

实际使用，在现代浏览器中，还可以不传第三个参数，我建议默认不传第三个参数，因为我认为冒泡是符合正常的人类心智模型的，大部分业务开发者不需要关心捕获过程。除非你是组件或者库的使用者，那就总是需要关心冒泡和捕获了。