js阻止事件冒泡/捕获

一、注册事件：addEventListener()和attachEvent()方法

addEventListener
removeEventListener
用法：element.addEventListener(String type, Function listener, boolean useCaptrue);

所有的DOM节点都包含这两个方法，并且他们都接受三个参数：
1.事件类型
2.事件处理方法
3.布尔参数，默认false (true捕获阶段调用事件处理方法；false冒泡阶段调用事件处理方法。)

但是在 IE7,8的绑定事件方法
IE不支持addEventListener和removeEventListener方法
实现了两个类似的方法：

attachEvent
detachEvent
这两个方法都接受两个相同的参数。

1.事件处理程序名称
2.事件处理程序方法

兼容性
attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

参考文章：https://zhuanlan.zhihu.com/p/295813199

http://c.biancheng.net/view/5940.html

二、阻止冒泡和取消默认事件(默认行为)
阻止冒泡：

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

阻止默认行为:

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

我们还可以使用DOM3级新增事件stopImmediatePropagation()方法来阻止事件捕获，另外此方法还可以阻止事件冒泡。

那么 stopImmediatePropagation() 和 stopPropagation()的区别在哪儿呢？
后者只会阻止冒泡或者是捕获。但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生，例子如下：

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { height: 30px; width: 150px; background-color: #ccf; }
            div {height: 30px; width: 150px; background-color: #cfc; }
        </style>
    </head>
    <body>
        <div>
            <p>paragraph</p>
        </div>
        <script>
            const p = document.querySelector('p')
            p.addEventListener("click", (event) => {
              alert("我是p元素上被绑定的第一个监听函数");
            }, false);

            p.addEventListener("click", (event) => {
              alert("我是p元素上被绑定的第二个监听函数");
              event.stopImmediatePropagation();
              // 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
              //event.stopPropagation();
              // 执行stopPropagation方法,仅阻止click事件冒泡,不会阻止p元素上绑定的其他click事件的事件监听函数的执行,3依旧会执行

            }, false);

            p.addEventListener("click",(event) => {
              alert("我是p元素上被绑定的第三个监听函数");
              // 该监听函数排在上个函数后面，该函数不会被执行
            }, false);

            document.querySelector("div").addEventListener("click", (event) => {
              alert("我是div元素,我是p元素的上层元素");
              // p元素的click事件没有向上冒泡，该函数不会被执行
            }, false);
        </script>
    </body>
</html>

javascript的return false只会阻止默认行为，而jQuery用的话则既阻止默认行为又防止对象冒泡。

VUE中阻止冒泡.stop 阻止默认行为.prevent