Dom事件流详解

最新推荐文章于 2023-05-12 21:28:28 发布

Sarnwan

最新推荐文章于 2023-05-12 21:28:28 发布

阅读量141

点赞数

分类专栏： JavaScript 文章标签： dom js

本文链接：https://blog.csdn.net/xuehaocyuyan/article/details/118438756

版权

JavaScript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

具体看代码

<!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>dom事件流</title>
    <style>
        #box {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }

        #box ul {
            width: 300px;
            margin: 50px;
            background-color: rgb(185, 169, 169, .3);
        }

        #box ul li {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <!-- dom事件流包含两个阶段：捕获阶段和冒泡阶段 -->
    <!-- 捕获阶段：就是从document逐层去找到目标节点 -->
    <!-- 冒泡阶段：就是从目标节点逐层冒泡到document -->
    <div id="box">
        <ul>
            <li>hello</li>
            <li>hello</li>
            <li>hello</li>
            <li>hello</li>
        </ul>
    </div>

    <!-- 演示事件流 -->
    <script>
        //获取事件源
        var box = document.getElementById('box');
        var ul = document.querySelector('ul');
        var lis = ul.children;
        //用lis 以div进行演示
        for (var i = 0; i < lis.length; i++) {
            // 给li注册事件:addEventListener(事件，具体操作，true/false) true是捕获阶段 false或者空着是冒泡阶段
            lis[i].addEventListener('click', function (e) {
                alert("点击li弹出警告框");
                //这里阻止其冒泡 stopPropagation()
                e.stopPropagation();
            })
        }
        // 给div注册事件
        box.addEventListener('click', function () {
            alert("点击div弹出警告框");
        }, false)
    </script>
</body>

</html>

Sarnwan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom事件流详解

具体看代码<!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"> <tit
复制链接

扫一扫