《事件冒泡和事件捕获》

杨晓风-linda

已于 2022-04-12 18:09:23 修改

阅读量444

点赞数 1

分类专栏： JavaScript 文章标签： javascript html html5

于 2020-02-13 23:31:56 首次发布

本文链接：https://blog.csdn.net/yxf15732625262/article/details/104303109

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

为了解决页面中事件流（事件发生顺序）的问题，微软和网景公司分别提出事件冒泡和事件捕获的解决方式。

dom元素中，既有冒泡，又有捕获的执行顺序：w3c规定，任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段

一、事件捕获

捕获型事件（event capturing）：事件从最不精确目标对象开始触发，然后到最精确

二、事件冒泡

冒泡型事件（event bubbling）：事件从最特定的事件目标对象到最不特定的事件目标对象（document对象）触发

三、事件捕获和冒泡过程图

四、编码实现

<!--
 * @Descripttion: 
 * @version: v1.0
 * @Author: linda
 * @Date: 2020-02-13 21:04:06
 * @LastEditors  : linda
 * @LastEditTime : 2020-02-13 21:09:30
 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>event</title>
</head>

<body>
  <div id="obj1">
    welcome
    <h5 id="obj2">hello</h5>
    <h5 id="obj3">world</h5>
  </div>
  <script>
    var obj1 = document.getElementById("obj1");
    var obj2 = document.getElementById("obj2");
    obj1.addEventListener("click", function () {
      alert("hello")
    }, false)
    obj2.addEventListener("click", function () {
      alert("world")
    })
  </script>
</body>

</html>

如上图所示：文档结构为：document > body > div > h5，分别在obj1和obj2绑定了一个点击事件，在代码中addEventListener(event,fn,useCapture)的第三个参数为false，页面便是在冒泡阶段阶段处理绑定事件。此时整个页面会有三种行为：

（注：若第三个参数为true，页面便是在捕获阶段处理绑定事件。第三个参数默认值为false，在冒泡阶段，也可以不传）

第一：点击welcome，弹出welcome

第二：点击hello，先弹出hello，再弹出welcome

第三：点击world，弹出welcome

五、如何阻止事件捕获和事件冒泡？

可以从两方面进行考虑解决方案，第一，在js范围内；第二，在各个前端框架中

1、在js范围内的解决方案

（1）w3c的方案-e.stopPropagation（DOM2级事件），IE的方案-e.cancelBubble=true

stopPropagation是事件对象的一个方法，作用是阻止目标元素的冒泡事件，但不会阻止默认行为

//根据浏览器不同，使用不同的阻止冒泡的方式
function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

扩展：DOM2级事件规定的事件流包括是三个阶段：

事件捕获阶段
处于目标阶段
事件冒泡阶段
注：在DOM事件流中，实际的目标在捕获阶段不会接收到事件，下一阶段是目标阶段，这时事件被触发，最后进入事件冒泡阶段，认为处于目标阶段是事件冒泡阶段的一部分

（2）e.stopImmediatePropagation（DOM3级新增事件）

（3）return false（在js中只会阻止默认行为，在jquery中既阻止默认行为也阻止事件冒泡。）

每次调用“return false”时，它实际上做了三件事情：

※event.preventDefault

※event.stopPropagation

※停止回调函数执行并立即返回

所以只有当同时需要preventDefault和stopPropagation，并且代码可以等到函数回调执行完成后才停止执行浏览的默认行为，再使用return false，若分别阻止事件捕获和冒泡，一般不使用此种方案，会有一定隐患存在。

2、在各个前端框架中的解决方案

※vue：

.stop 阻止事件冒泡
.once 处理函数只被处理一次
.self 只有点击当前元素的时候，才会触发处理函数

		
 <!--使用 .stop  阻止冒泡事件-->
 <!--很简单只需要在点击事件后面加上  .stop  就ok了-->
 <div class="day1" @click="day1Click">
     <div class="day2" @click.stop="day2Click"></div>
 </div>

    <!--使用 .once 实现点击当前元素的时候，处理函数只被触发一次 -->
    <!--只需要在当前元素的点击事件的后面加上  .once  就ok了-->
    <div class="day1" @click.self.once="day1Click">
        <div class="day2" @click="day2Click"></div>
    </div>

<!--使用 .self 实现只有点击当前元素的时候，才会触发处理函数 -->
<!--只需要在当前元素的点击事件的后面加上  .self  就ok了-->
<div class="day1" @click.self="day1Click">
    <div class="day2" @click="day2Click"></div>
</div>

扩展：如何设置捕获事件（vue：.capture）

<!--使用 .capture  设置捕获事件  需要给父级元素添加 -->
<!--很简单只需要在点击事件的父元素后面加上  .capture  就ok了-->
<div class="day1" @click.capture="day1Click">
    <div class="day2" @click="day2Click"></div>
</div>

六、如何取消默认事件

w3c的方法-e.preventDefault；IE的方法-e.returnValue = false

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

七、preventDefault方法实现原理

如果此事件没有被显式处理，它默认的动作也不应照常执行，此事件还是继续传播，除非碰到事件侦听器调用stopPropagation或stopImmediatePropagation，才停止传播

注：❤在事件流的任何阶段调用preventDefault都会取消事件

❤使用e.cancelable来检查该事件是否支持取消，为一个不支持cancelable的事件调用preventDefault是没有效果的

八、事件代理

在实际的开发中，可以利用事件流的特性，使用一种事件代理的方法解决某些业务需求

//点击页面中li元素，输出li当中的颜色
<ul id="color-list">
    <li>red</li>
    <li>yellow</li>
    <li>blue</li>
    <li>green</li>
    <li>black</li>
    <li>white</li>
</ul>

(function(){
    var color_list = document.getElementById('color-list');
    var colors = color_list.getElementsByTagName('li');
    for(var i=0;i<colors.length;i++){                          
      colors[i].addEventListener('click',showColor,false);
    };
    function showColor(e){
        var x = e.target;
        alert("The color is " + x.innerHTML);
    };
})();

利用事件流的特性，将上述实现方法可以只绑定一个事件处理函数便可完成：

(function(){
    var color_list = document.getElementById('color-list');
    color_list.addEventListener('click',showColor,false);
    function showColor(e){
        var x = e.target;
        if(x.nodeName.toLowerCase() === 'li'){
            alert('The color is ' + x.innerHTML);
        }
    }
})();

事件流的特性有冒泡和捕获，对于事件代理来说，在冒泡阶段还是在捕获阶段处理是没有明显的优劣之分的，但是由于事件冒泡的事件流模型被所有主流的浏览器兼容，从兼容性角度来讲，在进行事件代理时使用事件冒泡模型为宜。

巨人肩膀：

       https://segmentfault.com/a/1190000000749838

       https://blog.csdn.net/chenjuan1993/article/details/81347590

       https://www.cnblogs.com/zhuzhenwei918/p/6139880.html

       https://www.jianshu.com/p/3f0ee1f6ec30

       https://blog.csdn.net/weixin_44037017/article/details/90814939

       https://www.cnblogs.com/dannyxie/p/5642727.html

       http://caibaojian.com/javascript-stoppropagation-preventdefault.html

       https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault

杨晓风-linda

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
《事件冒泡和事件捕获》

为了解决页面中事件流（事件发生顺序）的问题，微软和网景公司分别提出事件冒泡和事件捕获的解决方式。一、事件捕获捕获型事件（event capturing）：事件从最不精确目标对象开始触发，然后到最精确二、事件冒泡冒泡型事件（event bubbling）：事件从最特定的事件目标对象到最不特定的事件目标对象（document对象）触发三、事件捕获和冒泡过程图...
复制链接

扫一扫