专栏首页Czy‘s BlogJS事件冒泡及阻止

JS事件冒泡及阻止

事件冒泡及阻止

当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表现,但事件确实传递了。 事件冒泡的原因是事件源本身可能没有处理事件的能力,即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件,所以需要将事件传播出去,从而能达到处理该事件的执行函数。

实例

当点击idi3<div>时,浏览器会依次弹出3 2 1,这就是事件冒泡,此正方形处于叶节点上,对其操作的事件会向上进行冒泡,直到根节点。

<!DOCTYPE html>
<html>
<head>
    <title>JS事件冒泡及阻止</title>
</head>
<style type="text/css">
    div{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<body>
    <div id="i1" style="height: 150px;width: 150px;background: red;">
        <div id="i2" style="height: 100px;width: 100px;background: green;">
            <div id="i3" style="height: 50px;width: 50px;background: blue;"></div>
        </div>
    </div>
</body>

<script type="text/javascript">
    document.getElementById("i1").addEventListener('click',(e) => {
        alert(1);
    }) 
    document.getElementById("i2").addEventListener('click',(e) => {
        alert(2);
    })  
    document.getElementById("i3").addEventListener('click',(e) => {
        alert(3);
    })     
</script>
</html>

应用场景

例如我们有10<li>标签,每个标签有一个uid作为判断用户点击的区别,使用冒泡就不需要为每个<li>绑定点击事件,可以称为事件委托

<!DOCTYPE html>
<html>
<head>
    <title>JS事件冒泡及阻止</title>
</head>
<style type="text/css">
    li{
        cursor: pointer;
    }
</style>

<body>
    <ul id="u1">
        <li uid="0">0</li>
        <li uid="1">1</li>
        <li uid="2">2</li>
        <li uid="3">3</li>
        <li uid="4">4</li>
        <li uid="5">5</li>
        <li uid="6">6</li>
        <li uid="7">7</li>
        <li uid="8">8</li>
        <li uid="9">9</li>
    </ul>
</body>

<script type="text/javascript">
    document.getElementById("u1").addEventListener('click',(e) => {
        alert(e.srcElement.getAttribute('uid'));
    })    
</script>
</html>

阻止冒泡

有时候我们并不希望事件冒泡而去执行上级节点绑定的事件,这时候就需要阻止事件的冒泡,w3c的方法是e.stopPropagation()IE则是使用 window.event.cancelBubble = true;

注意

  • 不是所有的事件都能冒泡。以下事件不冒泡:blurfocusloadunload
  • 事件解决方案方式在不同浏览器,可能是有所区别的,有些不支持捕获型方案,多数浏览器默认冒泡型方案。
  • 阻止冒泡并不能阻止对象默认行为,例如submit按钮被点击后会提交表单数据,需使用e.preventDefault();阻止默认行为,IE则是window.event.returnValue = false;

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Js获取数据类型

    JavaScript有着七种基本类型String、Number、Boolean、Null、Undefined、Symbol、Object,前六种为基本数据类型,...

    WindrunnerMax
  • 简单安全防护

    WindrunnerMax
  • cat命令

    cat命令属于文件管理,用于连接文件并打印到标准输出设备上,cat经常用来显示文件的内容,注意,当文件较大时,文本在屏幕上迅速闪过,会出现滚屏现象,此时往往看不...

    WindrunnerMax
  • 获取标签的那些事 之 动态集合

    HTML5学堂:今天的内容从一道题开始,很简单,但是,你可能会“跪”得很惨。之后我们自然要挖一挖这个坑喽~所有学过JavaScript的人都知道获取标签,但是真...

    HTML5学堂
  • pyquery 库详解安装pyquery 介绍数据初始化基本css选择器查找节点遍历节点获取属性获取文本节点操作伪类选择器

    虽然 xpath 与 Beautiful Soup 已经很强大了,不过语法还是过于啰嗦,pyquery提供了更加简洁优雅的语法,你可以像写jquery一般提取数...

    章鱼喵
  • 从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理

    事件冒泡:当一个元素触发某个事件的时候,会把这个事件传播到其父元素,一直到顶层元素。

    Daotin
  • 04-冒泡排序实现

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    xbhog
  • Python数据科学(一)- python与数据科学应用(Ⅰ)1.数据科学简介与应用2.Python与数据科学3.安装Anaconda4.使用Jupyter notebook5.Python 3 语法

    数据科学主要以统计学、机器学习、数据可视化以及(某一)领域知识为理论基础,其主要研究内容包括数据科学基础理论、数据预处理、数据计算和数据管理(来自百度百科)。

    意气相许的许
  • 解决Chrome不兼容li标签中的文本溢出自动隐藏的问题

    一般情况下对文章列表的调用,通常使用ul循环li标签。受页面模块宽度的的限制,一般需要对li进行文本内容溢出隐藏处理,实现更加合理的排版。经过测试在li标签中使...

    世纪访客
  • 数据分析证明最靠谱的电影评分网站不是 IMDB, 也不是烂番茄,而是...

    原作者 Alexandru Olteanu 编译 CDA 编译团队 本文为 CDA 数据分析师原创作品,转载需授权 前言 去影院看电影前我们都习惯上网看看影...

    CDA数据分析师

扫码关注云+社区

领取腾讯云代金券