事件捕获

最新推荐文章于 2023-07-13 11:46:30 发布

huisiyu

最新推荐文章于 2023-07-13 11:46:30 发布

阅读量193

点赞数

本文链接：https://blog.csdn.net/weixin_40371883/article/details/79054915

版权

<body>
    <div id="box">
        <a href="javascript:void (0)" id="link">哈哈</a>
    </div>
</body>

<script>
    window.onload = function () {
        var link = document.getElementById("link");
        var box = document.getElementById("box");
        var body = document.body;
        link.addEventListener("click", function (e) {
           console.log("1");
        },true);
        box.addEventListener("click", function () {
           console.log("2");
        },true);
        body.addEventListener("click", function () {
            console.log("3");
        },true);
    };
</script>

当addEventListener方法中第三个参数为true的时候，说明事件执行函数是在事件捕获阶段执行的。

如上代码，当点击链接哈哈的时候，控制台会输出3、2、1。这就是事件捕获。事件捕获触发顺序和事件冒泡相反。

优惠劵

huisiyu

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件捕获

哈哈 window.onload = function () { var link = document.getElementById("link"); var box = document.getElementById("box"); var body = document.body; link.addEvent
复制链接

扫一扫