浏览器事件：捕获过程和冒泡过程

捕获与冒泡

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

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

---

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

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

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

  


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学习笔记，内容来源于极客时间《重学前端》