JavaScript学习笔记之事件冒泡和事件捕获

最新推荐文章于 2024-07-04 20:33:10 发布

秋忆夏伤

最新推荐文章于 2024-07-04 20:33:10 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_29331365/article/details/52513057

本文通过一个HTML示例详细解析了事件流的概念及其两种形式：事件冒泡与事件捕获。介绍了如何使用addEventListener方法来指定事件触发的顺序，并展示了在不同层级元素上设置事件监听器的具体效果。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width:300px;
            height:300px;
            background-color:green;
        }
        #div2{
            width:200px;
            height:200px;
            background-color:red;
            float:left;
            margin-top:50px;
            margin-left:50px;
        }
        #pid{
            float:left;
            margin-top:80px;
            margin-left:65px;
            background-color:blue;
        }
    </style>
</head>
<body>
    
    <!-- 事件流：描述页面中接受事件的顺序。分两种：事件冒泡 和 事件捕获。-->
    <!-- 事件冒泡：由最具体的节点先接收事件，然后逐级向上传播至最不具体的节点（或文档）。-->
    <!-- 事件捕获：由最不具体的节点先接受事件，最具体的节点最后接收事件。-->

    <div id="div1">
        <div id="div2">
            <p id="pid">我是段落</p>
        </div>
    </div>

    <!-- 事件冒泡：当addEventListener()函数不接收第三个参数，或者第三个参数为 false 时。此时点击p标签时，
         事件触发的顺序是：p->div2->div1；当点击div2时，事件触发的顺序是：div2->div1，而当点击div1时，
         就只会触发div1的点击事件。即由嵌套在最里层的元素先接收事件，然后逐级传播到最外层的元素。-->

    <!-- 事件捕获：当 addEventListener() 函数的第三个参数为 true 时。此时点击p标签，事件的触发顺序是：
         div1->div2->p；当点击div2时，事件触发的顺序为：div1->div2；当点击div1时，也是只触发div1的点击
         事件。即由嵌套在最外层的元素先接收事件，然后逐级传播到嵌套在里层的元素。 -->

    <script type="text/javascript">
        var div1 = document.getElementById("div1");
        //div1.addEventListener("click", demo1);
        div1.addEventListener("click", demo1, true);

        var div2 = document.getElementById("div2");
        //div2.addEventListener("click", demo2);
        div2.addEventListener("click", demo2, true);

        var pid = document.getElementById("pid");
        //pid.addEventListener("click", demo3);
        pid.addEventListener("click", demo3, true);

        function demo1() {
            alert("我是div1");
        }
        function demo2() {
            alert("我是div2");
        }
        function demo3() {      
            alert("我是p");
        }
    </script>
</body>
</html>