一、事件流

作者: 萘小蒽 | 来源:发表于2019-04-01 20:53 被阅读0次

JavaScript事件探秘
JavaScript事件01——事件流
手写事件模型及事件代理/委托
事件
JavaScript事件捕获冒泡与捕获
事件流and事件处理程序
JS--事件（一）
事件
一、事件流
事件基础（2）

事件流描述的是从页面中接收事件的顺序。

1. 事件冒泡

事件冒泡是从事件开始时有最具体的元素（文档中嵌套层最深的节点）接收，然后逐级向上传播到较为不具体的节点。

<!DOCTYPE html>
<html>
  <head>
    <title>事件冒泡</title>
  </head>
  <body>
    <div id="app">Click Me</div>
  </body>
</html>

如果你点击页面的div元素，那么click事件会按照如下顺序传播：

div => body => html => document

2. 事件捕获

事件捕获的意思是让不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件，在事件达到预定目标之前捕获它。

document => html => body => div

3. DOM事件流

DOM规定的事件流包括三个阶段： $\color{#c7254e}{事件捕获}$ ， $\color{#c7254e}{处于目标阶段}$ ， $\color{#c7254e}{事件冒泡阶段}$ 。

首先是事件捕获，为截获事件提供机会。

然后是实际的目标接收到事件。

最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

结合1上面的代码：

事件流三阶段

在上图的DOM事件流中，实际目标( div元素)在捕获阶段不会接收到事件。意味着在捕获阶段从1️⃣(Document)到3️⃣(body)后就停止了（但是在高版本的主流浏览器中捕获阶段实际目标也会接收到事件，意味着有两次机会再实际目标上操作事件）。

下一个阶段是“处于目标”阶段，于是事件在div上发生了，并在事件处理中被看成冒泡阶段的一部分。

然后冒泡阶段发生(④、⑤、⑥、⑦)，事件又传播回文档。

4. DOM2级事件处理（addEventListener）

addEventListener(eventType, function, useCapture),接受三个参数：

event：需要处理的事件类型

function:作为事件处理的函数

useCapture:布尔值（true表示在捕获阶段调用。false表示在冒泡阶段调用）。

var btn = document.getElementByid("myBtn");
btn.onclick = function(event){
    cosnole.log(event.type)    //click
};
btn.addEventListener("click",function(event){
    console.log(event.type)   //click
},false)