JavaScript 事件捕获

小灰灰 2020-06-02 14:33 617阅读 0赞

# JavaScript 事件捕获

事件捕获对于很多朋友比较陌生，实际编写代码中应用较少。

大家普遍比较熟悉的是事件冒泡，它应用广泛，带来了很多便利。

对于知识点的掌握不要太功利，有些当前用不到的知识，可能在未来某个时刻发挥举足轻重作用。

就如同生活中交朋友，也不要太势力，诚实待人才是关键，谁知道未来谁会真正帮助你。

JavaScript事件的传播分为两个过程：

（1）.事件捕获阶段。

（2）.事件冒泡阶段。

事件捕获阶段在事件冒泡阶段之前，图示如下：

特别说明：下图来源于一外文网站，在此特别感谢。

![](/images/1591108358278.png)

图示分析说明如下：

（1）.图中数字顺序就是事件传播的顺序。

（2）.事件捕获先于事件冒泡。

（3）.事件捕获恰好与事件冒泡相反，它从顶层祖先元素开始，直到事件触发元素。

下面再通过代码实例演示一下事件捕获阶段的存在。

首先看一下addEventListener的语法结构：

```javascript
target.addEventListener(type, listener, useCapture)
```

很少朋友会关注第三个参数的真正作用，只是将它默认设置为false即可。

此参数规定是在捕获阶段触发事件还是在冒泡阶段触发事件，false表示在冒泡阶段触发事件。

正是由于工作中频繁使用事件冒泡，绝少使用事件捕获，从而甚至感觉第三个参数值固定为false一般。

代码实例如下：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#box{
  width:400px;
  height:400px;
  background-color:blue;
}
#middle{
  height:200px;
  width:200px;
  background-color:green;
}
#inner{
  height:50px;
  width:50px;
  background-color:red;
}
</style>
<script>
window.onload=function(){
  let obox=document.getElementById("box");
  let omiddle=document.getElementById("middle");
  let oinner=document.getElementById("inner");
      
  obox.addEventListener("click",function(){console.log("box")},true);
  omiddle.addEventListener("click",function(){console.log("middle")},true);
  oinner.addEventListener("click",function(){console.log("inner")},true);
}
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>
</body>
</html>
```

点击最内侧的红色div测试效果，代码运行效果截图如下：

![](/images/1591108338926.png)
addEventListener方法的第三个参数为true，说明在捕获阶段触发事件。

点击inner元素后，如果是事件冒泡触发，那么事件由触发元素向顶层元素传播。

而事件捕获则恰好相反，所以打印的id值顺序是从外到内。