浏览器事件：为什么会有捕获过程和冒泡过程？

浏览器事件

事件概述

一般个人设备的输入有：

• 键盘
• 鼠标
• 触摸屏

这其中，触摸屏和鼠标又有一定的共性，它们被称作pointer设备，所谓pointer设备，是指它的输入最终会被抽象成屏幕上面的一个点。 现代的UI系统，都源自WIMP系统。WIMP即Window Icon Menu Pointer四个要素，它最初由施乐公司研发，后来被微软和苹果两家公司应用在了自己的操作系统上

捕获与冒泡

捕获过程是从外向内，冒泡过程是从内向外。实际上点击事件来自触摸屏或者鼠标，鼠标点击并没有位置信息，但是一般操作系统会根据位移的累积计算出来，跟触摸屏一样，提供一个坐标给浏览器。那么，把这个坐标转换为具体的元素上事件的过程，就是捕获过程了。而冒泡过程，则是符合人类理解逻辑的：当你按电视机开关时，你也按到了电视机。 捕获是计算机处理事件的逻辑，而冒泡是人类处理事件的逻辑。 在我们实际监听事件时，我建议这样使用冒泡和捕获机制：默认使用冒泡模式，当开发组件时，遇到需要父元素控制子元素的行为，可以使用捕获机制。 addEventListener有三个参数：

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

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

• once：只执行一次。
• passive：承诺此事件监听不会调用preventDefault，这有助于性能。
• useCapture：是否捕获（否则冒泡）。

实际使用，在现代浏览器中，还可以不传第三个参数

焦点

焦点系统认为整个UI系统中，有且仅有一个“聚焦”的元素，所有的键盘事件的目标元素都是这个聚焦元素。 浏览器API还提供了API来操作焦点

document.body.focus();

document.body.blur();

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

自定义事件

实际上事件也是一种非常好的代码架构，但是DOM API中的事件并不能用于普通对象，所以很遗憾，我们只能在DOM元素上使用自定义事件。

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

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