事件冒泡和阻止事件冒泡：

　　事件冒泡的原理：从实际操作的元素（事件）向上级父元素一级一级执行下去，直到达到document/window,冒泡过程结束。例如：假设我有一个 div 盒子，里面嵌套了1个子元素 p，我要给子元素 p 绑定了onclick事件，如果父元素也绑定了这个相同的事件，当触发子元素（p标签）事件的时候就会触发这个事件并进行冒泡向上传递，也就是父元素 div 也会触发这个事件，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。下面我用具体的实例来说明一下下，为了大家更方便的看到这个效果，我在标签上添加了一些样式，下面是我的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #box {

            width: 200px;

            height: 200px;

            background-color: pink;

        }

        #box1 {

            width: 100px;

            height: 100px;

            margin: 0 auto;

            background-color: purple;

        }

    </style>

</head>

<body>

    <div id="box">

        我是box盒子

        <p id="box1">我是 p 标签</p>

    </div>

</body>

</html>

<script>

    /*

        事件冒泡原理 向上传递

            当后代元素被触发后 其祖先元素也会会触发相同事件

    */

    var box = document.getElementById('box');

    var box1 = document.getElementById('box1');

    box1.onclick = function() {

        alert(`我是 p 绑定的事件`);

    }

    box.onclick = function() {

        alert(`我是 div 绑定的事件`);

    }

</script>

在谷歌浏览器中打开后的效果是这样的

　　当鼠标点击 p 标签这个盒子的时候，它会触发自己绑定的onclick事件,并且当这个事件结束之后又会触发 div 标签的点击事件，这时就发生了事件冒泡的现象。

　　如何阻止事件冒泡：只需要给冒泡元素函数对象添加一个隐式参数 e 再调用 stopPropagation();这个方法即可阻止事件冒泡。下面是具体代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #box {

            width: 200px;

            height: 200px;

            background-color: pink;

        }

        #box1 {

            width: 100px;

            height: 100px;

            margin: 0 auto;

            background-color: purple;

        }

    </style>

</head>

<body>

    <div id="box">

        我是box盒子

        <p id="box1">我是 p 标签</p>

    </div>

</body>

</html>

<script>

    /*

        事件冒泡原理 向上传递

            当后代元素被触发后 其祖先元素也会会触发相同事件

    */

    var box = document.getElementById('box');

    var box1 = document.getElementById('box1');

    // 阻止事件冒泡 必须要传一个隐式参数 e

    box1.onclick = function(e) {

        // 阻止冒泡

        e.stopPropagation();

        alert(`我是 p 绑定的事件`);

    }

    box.onclick = function() {

        alert(`我是 div 绑定的事件`);

    }

</script>

js中的事件冒泡的更多相关文章

  1. js中阻止事件冒泡和浏览器默认行为

    在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题.[兼容IE和FF] ...

  2. JS中的事件冒泡（Bubble）和事件捕获（capture）以及如何阻止事件的冒泡

    对“捕获”和“冒泡”这两个概念,通常我们对冒泡了解和使用的会更多一些,因为在我们使用的所有浏览器中,都支持事件冒泡 ,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefo ...

  3. JS中的事件冒泡——总结

    一. 有话要说 事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结:一方面是给自己增加印象,另一方面给园子的新手们,提供 ...

  4. JS中的事件冒泡和事件捕获

    事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target). 事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签. 用图示表示如下: 1.冒泡事件: ...

  5. css 中的事件冒泡

    css伪类中的表现类似于事件冒泡的,举个例子,当你滑过一个元素时,他会认为你也滑过了该元素的父元素,即使该元素看起来并没有包含在父元素里面,此处以:hover例子: 效果图: 滑过前: 滑过后: CS ...

  6. js中的事件委托（事件代理）详解

    本文转载:https://www.cnblogs.com/liugang-vip/p/5616484.html#!comments js中的事件冒泡.事件委托是js 中一些需要注意的小知识点,这里结合 ...

  7. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  8. 看懂此文，不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  9. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

随机推荐

  1. php第三方登录（微博登录，仿照慕课网）

    https://www.cnblogs.com/haoyu521/p/5606931.html 1:开发之前,请大家先自行熟悉一下OAuth协议原理. 2:我们开发需要具备一个外网可访问的线上域名,如 ...

  2. AtCoder Regular Contest 060

    C - 高橋君とカード / Tak and Cards 思路:dp,先说说我想的,我写的dp数组是dp[i][j][k],表示从前i个数字中,选择j个数字,平均值为k,则dp[i][j][k] = d ...

  3. hdu 3635 Dragon Balls (MFSet)

    Problem - 3635 切切水题,并查集. 记录当前根树的结点个数,记录每个结点相对根结点的转移次数.1y~ 代码如下: #include <cstdio> #include < ...

  4. PHP中 spl_autoload_register() 函数用法

    这篇文章主要介绍了PHP中spl_autoload_register()函数用法,结合实例形式分析了__autoload函数及spl_autoload_register函数的相关使用技巧,需要的朋友可 ...

  5. jquery实用应用之jquery操作radio、checkbox、select

    本文收集一些jquery的实用技巧,非常实用的哦,其中对radio.checkbox.select选中与取值的方法. 获取一组radio被选中项的值var item = $('input[@name= ...

  6. hdu 1128 Self Numbers

    Self Numbers Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  7. java throw

    自行抛出一个异常对象,抛出异常类的对象: 若throw抛出的是Runtime异常: 程序可以显示使用try...catch来捕获并处理,也可以不管,直接交给方法调用者处理: 若throw抛出Check ...

  8. CF351E Jeff and Permutation

    CF351E Jeff and Permutation 贪心好题 考虑每个对能否最小化贡献和 先不考虑绝对值相同情况 发现,对于a,b假设|a|<|b|,那么有无贡献只和b的正负有关!如果a在b ...

  9. java 反射的概念

    反射的引入: Object obj = new Student(); 若程序运行时接收到外部传入的一个对象,该对象的编译类型是Object,但程序又需要调用该对象运行类型的方法: 1.若编译和运行类型 ...

  10. H3C 示例：计算子网内可用地址数