文章导航

JavaScript 事件捕获

2018-11-8 14:48| 作者: admin| 查看: 77| 评论: 0|来自: 蚂蚁部落

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

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

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

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

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

(1).事件捕获阶段。

(2).事件冒泡阶段。

关于事件冒泡可以参阅JavaScript 事件冒泡一章节。

事件捕获阶段在事件冒泡阶段之前,图示如下:

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/144933yldukfdlfnldjzd8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

图示分析说明如下:

(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.softwhy.com/" />
<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测试效果,代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/145021cjk6oolabd66lj5g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

addEventListener方法的第三个参数为true,说明在捕获阶段触发事件。

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

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部