一个有助于理解事件冒泡和事件捕获的例子

最新推荐文章于 2021-11-28 00:06:32 发布

一切还不都是因为菜

最新推荐文章于 2021-11-28 00:06:32 发布

阅读量552

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/theLostLamb/article/details/80657730

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

直接上代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .first {
            width: 500px;
            height: 500px;
            background-color: #0000cc;
        }
        .second {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>

<body>

<!--第一层DIV-->
<div class="first">
    <!--第二层DIV-->
    <div class="second">
        <!--第三层中有个button-->
        <input type="button" value="click" class="btn" />
    </div>
</div>


<script type="text/javascript">

    window.onload = function () {
        register();
    };
    function register() {
        //获取div以及button
        let div1 = document.getElementsByClassName('first')[0];
        let div2 = document.getElementsByClassName('second')[0];
        let btn = document.getElementsByClassName('btn')[0];

        //为三个目标标签注册点击事件
        div1.addEventListener('click', func, false);
        div2.addEventListener('click', func, false);
        btn.addEventListener('click', func, false);
    }
    function func() {
        let dict = {
            '1': '捕获阶段',
            '2': '处于目标阶段',
            '3': '冒泡阶段'
        };
        alert(this.className.toLowerCase() + '的事件在' + dict[event.eventPhase] + '被触发');
    }

</script>

</body>
</html>

先看一下运行效果：