浏览器事件：捕获过程和冒泡过程_浏览器事件捕获-CSDN博客

本文链接：https://blog.csdn.net/qq_38526167/article/details/130163817

事件处理包括捕获和冒泡两个阶段，从外向内的是捕获，从内向外的是冒泡。pointer设备如鼠标和触摸屏的事件由坐标控制，键盘事件则由焦点系统管理。addEventListener用于添加事件监听，第三个参数决定是捕获还是冒泡模式。此外，可以使用自定义事件来扩展功能，Event构造器和dispatchEvent方法用于创建和触发自定义事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

捕获与冒泡

说到这两个，我们就联想到事件，事件又和动作和设备有关，输入设备有：键盘，鼠标和触摸屏。

触摸屏和鼠标又有一定的共性，它们被称作 pointer 设备，所谓 pointer 设备，是指它的输入最终会被抽象成屏幕上面的一个点

捕获是从外向内的的一个过程，我们举例来说就是我们点击了按钮或者触摸屏，鼠标点击并没有位置信息，但是一般操作系统会根据位移的累积计算出来，跟触摸屏一样，提供一个坐标给浏览器。那么，把这个坐标转换为具体的元素上事件的过程，就是捕获过程了。这是计算机处理的事件的逻辑。

冒泡是从内向外的过程。它是符合人类理解逻辑的：当你按电视机开关时，你也按到了电视机。它是人类处理事件的逻辑。

举例来演示捕获和冒泡发生的完整顺序


<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)

//结果
“key1”
“key2”
“key22”
“key11”

在一个事件发生时，捕获过程跟冒泡过程总是先后发生，跟你是否监听毫无关联。捕获总是在冒泡之前发生

以上代码有助于了解监听事件的 API

addEventListener 有三个参数：

事件名称；
事件处理函数；
捕获还是冒泡。

第三个参数不一定是 bool 值，也可以是个对象，它提供了更多选项。once：只执行一次。passive：承诺此事件监听不会调用 preventDefault，这有助于性能。useCapture：是否捕获（否则冒泡）。

pointer 事件是由坐标控制（鼠标和触摸屏），键盘事件是由焦点系统控制的（键盘）

焦点

焦点系统认为整个 UI 系统中，有且仅有一个“聚焦”的元素，所有的键盘事件的目标元素都是这个聚焦元素。

浏览器 API 还提供了 API 来操作焦点，

document.body.focus(); document.body.blur();

原本键盘事件不需要捕获过程，但是为了跟 pointer 设备保持一致，也规定了从外向内传播的捕获过程。

自定义事件

除了来自输入设备的事件，还可以自定义事件，原因是：DOM API 中的事件并不能用于普通对象


var evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);

这里使用 Event 构造器来创造了一个新的事件，然后调用 dispatchEvent 来在特定元素上触发。我们可以给这个 Event 添加自定义属性、方法。

此文章为4月Day14学习笔记，内容来源于极客时间《重学前端》