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

　　事件冒泡的原理：从实际操作的元素（事件）向上级父元素一级一级执行下去，直到达到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. 【[Offer收割]编程练习赛9 C】三等分

    [题目链接]:http://hihocoder.com/problemset/problem/1479 [题意] . [题解] 首先算出所有节点的权值的和val; 然后如果val%3!=0则直接输出0 ...

  2. hdu 3272 Mission Impossible

    Mission Impossible Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  3. Logback新版本报no applicable action for [Encoding]问题

    logback.xml配置文件如下: <?xml version="1.0" encoding="UTF-8"?> <configuratio ...

  4. PHP 试题（1）

    1.__FILE__表示什么意思?(5分)文件的完整路径和文件名.如果用在包含文件中,则返回包含文件名.自 PHP 4.0.2 起,__FILE__ 总是包含一个绝对路径,而在此之前的版本有时会包含一 ...

  5. 建立一个Web项目及一些错误解决办法

    培训之前,先自学一波,写一个从Hello World,然后记录一下每天学习Java Web的过程:东西很多,有用的会写大量解释,希望能最终学完 然后搞定这门语言吧. 1.配置tomacat:点击win ...

  6. [转]Android Studio实现代码混淆

     1,在build.grandle添加,其中规则写在proguard-rules.pro中,也可以自定义一个文件,将其代替,比如eclipse常用的 proguard-project.txt: bui ...

  7. java操作数组的工具类-Arrays

    static int binarySearch(type[] a, type key) 使用二分搜索法来搜索key元素在数组中的索引:若a数组不包括key,返回负数.(该方法必须已按升序排列后调用). ...

  8. PHP会员找回密码功能的简单实现

    文章来自:博客 http://www.jb51.net/article/91944.htm 设置思路 1.用户注册时需要提供一个E-MAIL邮箱,目的就是用该邮箱找回密码. 2.当用户忘记密码或用户名 ...

  9. P1047 汉诺塔

    题目描述 汉诺塔是根据一个印度传说形成的数学问题:有三根杆子A, B, C, A杆上有n个穿孔圆盘, 盘的尺寸由下到上依次变小. 要求按照下列规则将所有圆盘移至C杆: 每次只能移动一个圆盘 大盘不能叠 ...

  10. 2019-8-31-C#-控制台使用-UAC-权限

    title author date CreateTime categories C# 控制台使用 UAC 权限 lindexi 2019-08-31 16:55:58 +0800 2018-07-05 ...