JS事件传播流程，事件阻止

JS事件传播流程，事件阻止

山雨欲来枫满楼 2019-05-29 20:02:51  690  收藏 1
展开
JS事件传播流程
js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

在我们平常用的addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执行的函数，然而，addEventListener还可以传入第三个参数，第三个参数默认值是false，表示在事件冒泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。

捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。

目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。

事件冒泡: 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。

事件流的原理图如下：
　　 
　　
　　从图中我们可以知道

1、一个完整的JS事件流是从window开始，最后回到window的一个过程

2、事件流被分为三个阶段(1-5)捕获过程、(5-6)目标过程、(6-10)冒泡过程

3、在冒泡过程中6比7早触发。

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

阻止默认行为，不影响自定义的行为。
    //阻止浏览器的默认行为 
    function stopDefault( e ) { 
        //阻止默认浏览器动作(W3C) 
        if ( e && e.preventDefault ) 
        e.preventDefault(); 
        //IE中阻止函数器默认动作的方式 
        else 
        window.event.returnValue = false; //不是e.returnValue=false;
        return false; 
    }
————————————————
版权声明：本文为CSDN博主「山雨欲来枫满楼」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44829594/article/details/90677256