专栏首页若是烟花关于JS的事件捕获与冒泡

关于JS的事件捕获与冒泡

事件与事件流

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

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

捕获与冒泡

  • 事件捕获:执行顺序(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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python基础 -- 自定义排序

    最近需要自定义排序序列,一直一筹莫展。然后发现,利用 sort() 或 sorted() 的 key 即可实现。

    lpe234
  • 七日Python之路--第三天(之不安分 wxPython)

    Python有好多个GUI框架,wxPython比较流行,so just do it..... Win下各种不爽,又换Ubuntu

    lpe234
  • 七日Python之路--第二天

    由于之前使用过一段Ubuntu,所以基本命令啥的都还可以。装差利器Vim也是使用过一段时间的。

    lpe234
  • 校招小米Java后台

    首先声明,我是被逼着发文的...平时没有这种公开发文章的习惯,都是自己在印象上写自己的笔记。然而...

    牛客网
  • 无人驾驶是好,但晕车咋办?

    Root 编译整理自 CNN 量子位 报道 | 公众号 QbitAI 一个人坐无人车去上班的fà,怎样做到专心吃鸡的同时还不晕车? Waymo最近申请下来了个专...

    量子位
  • vue事件监听机制

    $emit 抛出后活等着 $on ,如果监听到了则阻塞执行; 如果为监听到或者未绑定,则会继续运行。

    Daotin
  • 为什么我们不能使用KUBERNETES 原

    kubernetes的服务发现到node创建启动,最终到提供服务,中间都离不开iptable的nat模块,在业务高访问量的情况下,这是无法满足性能要求的。

    domain0
  • layui响应式导航(菜单)

    今天来分享一套自己写的layui响应式导航栏菜单,网络上搜索无果,只能自己写了,现在分享出来。

    小白程序猿
  • 基于大数据的计量公共服务平台设计及应用价值研究

      在当前国家倡导的“质量强国”战略中,计量起到极其关键的作用,计量技术的发展支撑着社会发展的各个方面;计量技术的创新引领了科技和产业的创新。而在大数据时代,数...

    企鹅号小编
  • 武大学生用Python敲出樱花开放 | 附源码

    为此,武大开通了#樱花云直播# ,3月16日-3月25日,每天 10:00-16:00。相约武大官博,每天看不同地点的樱花

    Python编程与实战

扫码关注云+社区

领取腾讯云代金券