【转】JS事件捕获和事件冒泡

最新推荐文章于 2024-09-02 22:46:42 发布

Tobieance

最新推荐文章于 2024-09-02 22:46:42 发布

阅读量51

点赞数 1

文章标签： javascript 前端开发语言 ecmascript

本文链接：https://blog.csdn.net/Tobieance/article/details/134184536

版权

DOM事件流(event flow )存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获(event capturing)：当鼠标点击或者触发dom事件时(被触发dom事件的这个元素被叫作事件源)，浏览器会从根节点 =>事件源(由外到内)进行事件传播。

事件冒泡(dubbed bubbling)：事件源 =>根节点(由内到外)进行事件传播。
无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播。

dom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

addEventListener的第三个参数
在我们平常用的addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，然而，addEventListener还可以传入第三个参数：

element.addEventListener(event, function, useCapture);

第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。事件冒泡

<body>
  <div id="parent">
    父元素
    <div id="child">
      子元素
    </div>
  </div>
  <script type="text/javascript">
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");document.body.addEventListener("click",function(e){
  console.log("click-body");
},false);

parent.addEventListener("click",function(e){
  console.log("click-parent");
},false);

child.addEventListener("click",function(e){
  console.log("click-child");
},false);
</script>

</body>

点击子元素时结果如下：

事件触发顺序是由内到外的，这就是事件冒泡。如果点击子元素不想触发父元素的事件，可使用event.stopPropagation();方法：

child.addEventListener("click",function(e){
　　console.log("click-child");
  　e.stopPropagation();
},false);

事件捕获
修改事件冒泡的代码：

var parent = document.getElementById("parent");
var child = document.getElementById("child");document.body.addEventListener("click",function(e){

console.log("click-body");

},false);
parent.addEventListener("click",function(e){

console.log("click-parent---事件传播");

},false);

　　　　

　　　　 //新增事件捕获事件代码

parent.addEventListener("click",function(e){

console.log("click-parent--事件捕获");

},true);
child.addEventListener("click",function(e){

console.log("click-child");

},false);