您的位置：首页 > Web前端 > JavaScript

浅谈JS的事件传播流程

2019-03-07 23:03 106 查看

javaScript的事件传播流程

一、Javascript与HTML之间的交互是通过事件实现的。
事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
可以使用侦听器来预定事件，以便事件发生时执行相应代码。

二、事件流
①JS事件流最早要从IE和网景公司的浏览器大战说起，IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的
②IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。
三事件传播的三个过程，事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获由远及近逐渐靠近事件目标，事件冒泡由事件目标逐渐向上冒泡;

在支持w3c的浏览器中，程序员可以通过设置addEventListener(type,handler,useCapture)中的userCapture值来决定元素是在冒泡阶段执行事件还是捕获阶段执行，默认为false，即冒泡阶段。
IE没有提供选择，事件只能在冒泡阶段捕获。

四、事件流原理图如下：

从图中我们可以知道:
1、一个完整的JS事件流是从window开始，最后回到window的一个过程
2、事件流被分为三个阶段(1-5)捕获过程、(5-6)目标过程、(6~10)冒泡过程
3、在冒泡过程中6比7早触发。

1.eg:

<body>
<div class="parent">
parent
<div class="child">child</div>
</div>
</body>
<script type="text/javascript">
var oParent=document.getElementsByClassName("parent")[0];
var oChild=document.getElementsByClassName("child")[0];
oParent.oclick=function(){
console.log("parent");
}
oParent.onclick=function(){
console.log("parent-2");
}
oChild.onclick=function(){
console.log("chlid");
}
</script>

结果如下：
child
parent-2

上面的例子是Dom0级事件，在Dom0级事件中一个元素相同的事件只能绑定一次如（onclick），并且绑定的是最后绑定的那个事件，这个有点像jquery中的html方法一样，后面的会覆盖掉前面的内容一样。在Dom0级事件里只有事件冒泡没有事件捕获.

2.eg:

在Dom2级事件里支持事件冒泡和事件捕获:
oParent.addEventListener("click",function(){
console.log("parent");
},false);
oParent.addEventListener("click",function(){
console.log("parent-2");
},false);
oChild.addEventListener("click",function(){
console.log("chlid");
},false);

结果如下：
child
parent
parent-2

总结：

这里是发生了事件冒泡，点击child，先执行了child后输出了parent和parent-2，同时可以看出Dom2级事件是支持添加同名事件的按照先后顺序执行。

addEventListener是Dom2里添加事件监听的写法可以接受三个参数，第一个参数是事件名称，第二个是事件处理函数，第三个参数是布尔值true是设置事件捕获，false是设置事件冒

泡，默认情况下是false。IE里面添加监听事件是attachEvent但是IE不支持事件捕获，所以attachEvent只有前两个参数，不能设置true和false，同时事件名也要加上on。

比如addEventListener的单击事件是click,而attachEvent的单击事件是onclick。

有添加监听事件就有移除监听事件，与addEventListener相对的是removeEventListener，与attachEvent相对应的是deatchEvent这两个写法与上面类似，需要注意的是移除事件时要

删除事件名和对应的方法。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航