js事件冒泡

事件冒泡

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

因为子元素以及父元素在设置监听事件时均设置的是在事件的冒泡阶段调用回调函数，单击子元素时，因为事件的冒泡此单击事件会一直冒泡到父元素中。

 代码如下：

<!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>
</head>
 
<body>
    <div class="father">father盒子
        <div class="son">son盒子</div>
    </div>
    <script>
        // onclick 和 attachEvent（ie） 在冒泡阶段触发
        /*
         冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        如果参数为true,则为捕获阶段
        */
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        // 给son注册单击事件
        son.addEventListener('click', function (event) {
            alert('son');
            // // 阻止事件冒泡
            // event.stopPropagation();
        }, false);
        // 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function (event) {
            alert('father');
 
            // // 阻止事件冒泡
            // event.cancelBubble = true;
 
        }, false);
        // 给document注册单击事件，省略第3个参数
        document.addEventListener('click', function () {
            alert('document');
        })
    </script>
 
</body>
 
</html>

 

posted @ 2023-10-10 17:38  因为在乎  阅读(42)  评论(0)    收藏  举报