首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于JS的事件捕获与冒泡

关于JS的事件捕获与冒泡

作者头像
lpe234
发布2020-07-27 17:23:09
2.7K0
发布2020-07-27 17:23:09
举报
文章被收录于专栏:若是烟花若是烟花

事件与事件流

事件,是文档或浏览器窗口发生的一些特定的交互事件。事件流,描述的是页面中接收事件的顺序。

默认情况下,事件使用冒泡事件流,不使用捕获事件流。

捕获与冒泡

  • 事件捕获:执行顺序(document->html->body->div)
  • 事件冒泡:执行顺序(div->body->html->document)
  • IE < 9:只支持事件冒泡
  • IE 9+|chrome|firefox|safari:事件冒泡+事件捕获

阻止捕获与冒泡

event.stopPropagation()

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #outer {
            display: block;
            width: 300px;
            height: 300px;
            background-color: red;
        }

        #middle {
            display: block;
            width: 200px;
            height: 200px;
            background-color: green;
        }

        #inner {
            display: block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="outer">
        outer
        <div id="middle">
            middle
            <div id="inner">
                inner
            </div>
        </div>
    </div>
</div>

<script>
    var outer = document.getElementById('outer');
    var middle = document.getElementById('middle');
    var inner = document.getElementById('inner');

    outer.addEventListener('click', function (event) {
        console.log('outer-->事件捕获');
        // 阻止事件捕获,内层不会再捕获到事件
        // event.stopPropagation();
    }, true);
    middle.addEventListener('click', function (event) {
        console.log('middle-->事件捕获');
    }, true);
    inner.addEventListener('click', function (event) {
        console.log('inner-->事件捕获');
    }, true);
    inner.addEventListener('click', function (event) {
        console.log('inner-->事件冒泡');
    }, false);
    middle.addEventListener('click', function (event) {
        console.log('middle-->事件冒泡');
        // 阻止事件冒泡,外层不会再捕获到事件
        // event.stopPropagation();
    }, false);
    outer.addEventListener('click', function (event) {
        console.log('outer-->事件冒泡');
    }, false)
</script>
</body>
</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 捕获与冒泡
  • 阻止捕获与冒泡
  • 示例代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档