JS中事件的冒泡与冒泡的取消

最新推荐文章于 2024-08-15 19:36:37 发布

Fantasc

最新推荐文章于 2024-08-15 19:36:37 发布

阅读量2.1k

点赞数

分类专栏： JS基础学习

本文链接：https://blog.csdn.net/Fantasc/article/details/119544181

版权

javascript

JS基础学习专栏收录该内容

78 篇文章 8 订阅

订阅专栏

事件的冒泡：（Bubble）

所谓的事件冒泡，就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

注意：是相同的事件，而不是相同的响应函数内容，比如大家都绑定了onclick单击事件，叫做相同的事件。

以下是练习的小例子：

在以下代码中，span是div元素的子元素，而div是body的子元素，他们都绑定的是一样的事件，所以当span元素的响应函数被触发时，绑定了相同事件的的父元素以及祖先元素的响应函数也会被触发。
所谓的向上传递，指的是向当前元素的父元素或者祖先元素传递，比如在本例子中，如果触发span的响应函数，那么绑定了相同事件的父元素div和body的响应函数都会被触发。如果触发div的响应函数，那么span的响应函数不会被触发，而父元素body的响应函数会被触发，如果祖先元素document也绑定了相同的事件，也会被触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #s{
            background-color: yellow;
        }
    </style>

    <script type="text/javascript">
        
        window.onload = function(){

            //为span绑定单击响应函数
            var s = document.getElementById("s");
            s.onclick = function(){
                alert("我是span的单击响应函数");
            };
            //为id为box的div绑定单击响应函数
            var box = document.getElementById("box");
            box.onclick = function(){
                alert("我是div的单击响应函数");
            };//为span绑定单击响应函数
            document.body.onclick = function(){
                alert("我是body的单击响应函数");
            };
        };
    </script>
</head>
<body>
    <div id="box">
        我是div
        <span id="s">我是span</span>
    </div>
</body>
</html>

在开发中，事件的冒泡是非常有用的，如果不希望发生时间冒泡，可以通过事件对象来取消冒泡，将事件随想的cancleBubble属性改为true即可
- 注意取消事件冒泡这个用法：要设置两次，第一次是开始冒泡的时间，第二次是结束冒泡的事件。例如：在以下代码中我们为span元素和body元素的事件对象设置了取消冒泡，那么时间冒泡将从span元素的响应函数被触发的时候开始，一直到body的冒泡结束后就结束冒泡。即便body的祖先元素document元素也绑定了与它们相同的事件也不会冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #s{
            background-color: yellow;
        }
    </style>

    <script type="text/javascript">
        
        window.onload = function(){

            //为span绑定单击响应函数
            var s = document.getElementById("s");
            s.onclick = function(){
                alert("我是span的单击响应函数");
            };
            //为id为box的div绑定单击响应函数
            var box = document.getElementById("box");
            box.onclick = function(){
                alert("我是div的单击响应函数");
            };//为span绑定单击响应函数
            document.body.onclick = function(event){
                event = event || window.event
                alert("我是body的单击响应函数");
                event.cancleBubble = true;//取消当前事件的冒泡
            };
        };
    </script>
</head>
<body>
    <div id="box">
        我是div
        <span id="s">我是span</span>
    </div>
</body>
</html>