JavaScript事件

事件流描述的是从页面接收事件的顺序。比如说单击了某个按钮，但是单击事件不仅发生在按钮上，在单击按钮的同时，也单击了按钮的容器元素，甚至是 、 、document。

事件传播的顺序不同导致存在两种事件流机制：事件冒泡和捕获。

事件冒泡

IE 提出的事件流被称作事件冒泡（event bubbling），即事件开始时由最具体的元素（DOM 层级最深的 node）接收，然后逐级向上传播，直至 document：

事件捕获

Netscape Communicator（网景）提出的事件流被称作事件捕获（event capturing）。与冒泡相反，捕捉在事件到达预定目标（即 DOM 层级最深的 node）之前捕获，document 对象首先被触发事件，然后沿 DOM 树逐级向下传播，直至实际目标：

DOM 事件流

早期浏览器兼容性的问题导致了 Netscape 只使用事件捕获，IE 只使用事件冒泡，后来 W3C 规范了这些行为，保留了两种机制。

DOM2 Events 规范规定了事件流分为3个阶段：事件捕获、到达目标和事件冒泡。事件捕获最先发生，其次是目标元素接收到事件，最后阶段是冒泡。

事件流的选择

默认情况下所有事件处理程序（响应某个事件的函数）都是在冒泡阶段注册的，这在大多数情况下更有意义。当然也可以通过 addEventListener 方法选择使用捕获事件流。

addEventListener 语法：

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

第3个参数：

• options
  • capture 布尔值
  • once
  • passive
  • signal
• useCapture 布尔值

capture 和 useCapture 决定了事件顺序，也就是事件流。当布尔值为 true 时，表示使用事件捕获机制，当为 false 时，则使用事件冒泡机制。该属性默认为 false。