关于javascript:JavaScript-事件

事件流 形容的是从页面接管事件的程序。比如说单击了某个按钮，然而单击事件不仅产生在按钮上，在单击按钮的同时，也单击了按钮的容器元素，甚至是 \<body\>、\<html\>、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。