JavaScript中捕获/阻止捕获、冒泡/阻止冒泡

最新推荐文章于 2024-04-01 13:33:38 发布

qinzheng_chen

最新推荐文章于 2024-04-01 13:33:38 发布

阅读量680

点赞数

原文链接：https://www.cnblogs.com/zhuzhenwei918/p/6139880.html

版权

事件冒泡

即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。
　下面举一个简单的例子：

<!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);

        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>

这时，我们只点击button元素，效果如下：
在这里插入图片描述
可以看到，虽然我们只点击了button元素，但是，button外的third、second、first上的事件由内向外以此被触发，触发的顺序是由DOM树的下层到DOM树的最上面，故称为冒泡。

（说明：尽管这里我使用了DOM2级事件处理程序，并设置每个事件为冒泡阶段发生，但是即使使用DOM0级，得到的结果也是这样的，冒泡是默认的）

但是如果我们不希望事件冒泡呢？那么如何阻止事件冒泡？

实际上，事件的对象有一个stopPropagation()方法可以阻止事件冒泡，我们只需要把上个例子中button的事件处理程序修改如下：

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

event.stopPropagation()

在这里插入图片描述
即该方法不仅仅可以阻止冒泡，还可以阻止捕获和处于目标阶段。

那么冒泡的终点是哪里呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>memory leak</title>
</head>
<body>
  <div id="first">
    <div id="second">
      <button id="button">冒泡</button>
    </div>
  </div>
  <script>
    var button = document.getElementById('button'),
        second = document.getElementById('second'),
        first = document.getElementById('first'),
        body = document.body,
        html = document.documentElement;
    button.addEventListener('click', function () {
      alert('button');
    });
    second.addEventListener('click', function () {
      alert('second');
    });
    first.addEventListener('click', function () {
      alert('first');
    });
    body.addEventListener('click', function () {
      alert('body');
    });
    html.addEventListener('click', function () {
      alert('html');
    });
    window.addEventListener('click', function () {
      alert('window');
    });
  </script>
</body>
</html>

从上面的这段代码可以看出，可以从 button -> div1 -> div2 -> body -> html -> window。即最终可以冒泡到window上，即使是有iframe的话，也是不影响的，比如，我们把这个页面嵌入到另外一个页面中，最终也是会冒泡到这个页面的window，即使是在iframe上添加一个click事件，也是不会冒泡到这个iframe上的，即事件的冒泡是相互独立的。

第二部分：事件捕获

<!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");
        },true);

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

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

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

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

大家可以看到这个例子我只是把addEventListener()方法的第三个参数由前面例子的false修改为了true,也就是使用捕获方式获得button，那么结果如下：
在这里插入图片描述
补充： stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕获，也可以阻止处于目标阶段。

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

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

这样，就可以在id为second处阻止事件的捕获了。

stopImmediatePropagation() 和 stopPropagation()的区别

那么 stopImmediatePropagation() 和 stopPropagation()的区别在哪儿呢？

后者只会阻止冒泡或者是捕获。但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生。

qinzheng_chen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡

事件冒泡即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。　下面举一个简单的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>bubble</title> <style> button{ background: red;
复制链接

扫一扫