javascript 中捕获和阻止捕获，冒泡和阻止冒泡

作者: 罗斯福 | 来源:发表于2019-12-14 14:15 被阅读0次

javascript 中捕获和阻止捕获，冒泡和阻止冒泡
阻止冒泡和阻止捕获
js 阻止冒泡阻止默认事件
默认事件
vue 阻止事件冒泡，捕获方法
事件代理及常用的 HTML 事件
day29-web前端之jQuery及Ajax
java script 知识点
vue事件
事件冒泡（阻止冒泡）和事件捕捉（阻止捕获）

1.冒泡排序实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bubble</title>
    <style>
        button{
            background: red;
            color:white;
        }
        #third{
            width: 50px;
            height: 50px;
            border:thin solid red;
        }
        #second{
            width: 100px;
            height: 100px;
            border:thin solid red;
        }
        #first{
            width:200px;
            height: 200px;
            border:thin solid red;
        }
    </style>
</head>
<body>
    <div id="first">
        <div id="second" >
            <div id="third" >
                <button id="button">事件冒泡</button>
            </div>
        </div>
    </div>
    <script>

        document.getElementById("button").addEventListener("click",function(){
            alert("button");
        },false);//如果不添加false，默认为冒泡

        document.getElementById("third").addEventListener("click",function(){
            alert("third");
        },false);

        document.getElementById("second").addEventListener("click",function(){
            alert("second");
        },false);        

        document.getElementById("first").addEventListener("click",function(){
            alert("first");
        },false);

    </script>
</body>
</html>

现象：可以看到虽然我们只点击了botton元素，但是botton外的事件依次被促发，触发的顺序为DOM树的最下层到DOM树的最上层。

2.怎么阻止冒泡

调用函数stopPropagation()
上述的事件botton事件处理如下：

document.getElementById("button").addEventListener("click",function(event){
            alert("button");
            event.stopPropagation();    
        },false);

这样点击botton只会显示一个弹窗

二.捕获事例：

只需要将上述中addEventListener中将false改为ture，怎么阻止捕获，同样可以再需要阻止的节点添加事件stopPropagation();

document.getElementById("second").addEventListener("click",function(event){
            alert("button");
            event.stopPropagation();    
        },true);

结果：指挥弹出first，second
补充：DOM3新增函数：event.stopImmediatePropagation()
VSstopPropagation()
若同一元素上绑定多个事件，若使用前者将同时被阻止，后者将只阻止当前的事件传递到父元素。
祥情参照：
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopImmediatePropagation