【新手案例】多层标签嵌套的事件绑定和传播顺序

最新推荐文章于 2021-12-26 18:41:57 发布

代码男神小轩轩

最新推荐文章于 2021-12-26 18:41:57 发布

阅读量574

点赞数

文章标签： html php javascript css html5

本文链接：https://blog.youkuaiyun.com/qq464685223/article/details/105050573

版权

本文详细阐述了HTML中事件传播的两种方式：冒泡事件与捕获事件，并通过实例代码展示了如何使用addEventListener函数来实现不同事件传播顺序的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多层标签嵌套的事件绑定传播顺序

1.普通绑定（冒泡事件）：从子级向父级传播【常用】

2.监听绑定（捕获事件）：使用addEventListener()函数第三参数设置为true可以将事件传播改为从父级向子级传播

案例实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ChiHinTest</title>
</head>
<body>
<!--事件传播-->
<div align="center">
    <div id="a" style="display:inline-block;">
        冒泡事件
        <div id="div1" style="width: 150px;height:150px;background-color: cornflowerblue"
             align="center">
            div1
            <div id="div2" style="width: 100px;height:100px;background-color: chartreuse" align="center">
                div2
                <div id="div3" style="width: 50px;height:50px;background-color: chocolate" align="center">
                    div3
                </div>
            </div>
        </div>
    </div>
    <div id="b" style="display:inline-block;">
        捕获事件
        <div id="div4" style="width: 150px;height:150px;background-color: blanchedalmond"
             align="center">
            div4
            <div id="div5" style="width: 100px;height:100px;background-color: chartreuse" align="center">
                div5
                <div id="div6" style="width: 50px;height:50px;background-color: cyan" align="center">
                    div6
                </div>
            </div>
        </div>
    </div>
</div>
    <script type="text/javascript">

        // 冒泡事件(从内向外执行)
        var div1 = document.querySelector("#div1");
        var div2 = document.querySelector("#div2");
        var div3 = document.querySelector("#div3");
        div1.addEventListener("click", function () {
            console.log('卧槽你点我1')
        });
        div2.addEventListener("click", function () {
            console.log('卧槽你点我2')
        });
        div3.addEventListener("click", function () {
            console.log('卧槽你点我3')
        });

        // 捕获事件(从外向内执行)
        var div4 = document.querySelector("#div4");
        var div5 = document.querySelector("#div5");
        var div6 = document.querySelector("#div6");
        div4.addEventListener("click", function () {
            console.log('卧槽你点我4')
        }, true);
        div5.addEventListener("click", function () {
            console.log('卧槽你点我5')
        }, true);
        div6.addEventListener("click", function () {
            console.log('卧槽你点我6')
        }, true);
    </script>
</body>
</html>