JavaScript之DOM事件传播的方法

cloudOnSkyline

已于 2022-06-27 14:53:20 修改

阅读量329

点赞数 1

分类专栏： JavaScript 文章标签： javascript

于 2022-06-22 15:17:27 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125409835

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文主要介绍在获取页面元素并绑定事件之后，事件是按照什么样的顺序执行的。包括两种方式：冒泡和捕获。

冒泡为默认顺序，由内而外，从子到父，执行时从内到外获取设置了冒泡的元素，设置了冒泡或直接点击的元素会被执行。

捕获可通过以下方法设置：将addEventListener()的第三个参数设置为true，冒泡对应的是false.从外到内，由父到子，执行时从外到内捕获设置了true的元素,设置为true或者直接点击的元素会被执行。示例代码如下：

<!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>
        div {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        
        ul {
            width: 400px;
            height: 100px;
            background-color: #2ba549;
        }
        
        li {
            width: 200px;
            height: 50px;
            background-color: #cf4c18;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
    <script>
        var divs = document.querySelectorAll('div');
        var uls = document.querySelectorAll('ul');
        var lis = document.querySelectorAll('li');
        // 1.冒泡：从内到外获取设置了冒泡的元素，设置了冒泡或直接点击的元素会被执行
        divs[0].addEventListener('click', function() {
            alert(1);
        });
        uls[0].addEventListener('click', function() {
            alert(2);
        });
        lis[0].addEventListener('click', function() {
            alert(3);
        });
        // 2.捕获:从外到内捕获设置了true的元素,设置为true或者直接点击的元素会被执行
        divs[1].addEventListener('click', function() {
            alert(1);
        }, true);
        uls[1].addEventListener('click', function() {
            alert(2);
        }, true);
        lis[1].addEventListener('click', function() {
            alert(3);
        }, true);
    </script>
</body>

</html>

cloudOnSkyline

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之DOM事件传播的方法

本文主要介绍在获取页面元素并绑定事件之后，事件是按照什么样的顺序执行的。包括两种方式：冒泡和捕获。冒泡为默认顺序，由内而外，从子到父，执行时从内到外获取设置了冒泡的元素，设置了冒泡或直接点击的元素会被执行。捕获可通过以下方法设置：将addEventListener()的第三个参数设置为true，冒泡对应的是false.从外到内，由父到子，执行时从外到内捕获设置了true的元素,设置为true或者直接点击的元素会被执行。示例代码如下：...
复制链接

扫一扫