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

　　事件冒泡的原理：从实际操作的元素（事件）向上级父元素一级一级执行下去，直到达到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. android学习——Android Layout标签之-viewStub，requestFocus，merge，include

    定义Android Layout(XML)时,有四个比较特别的标签是非常重要的,其中有三个是与资源复用有关,分别是<viewStub/>, <requestFocus />, ...

  2. 一些关于中国剩余定理的数论题(POJ 2891/HDU 3579/HDU 1573/HDU 1930)

    2891 -- Strange Way to Express Integers import java.math.BigInteger; import java.util.Scanner; publi ...

  3. oracle函数 ln(y)

    [功能]返回以e为底的y的对数(e为数学常量) [参数]y,数字型表达式 (条件y>0) [返回]数字 [示例] select exp(3),exp(-3),ln(20.0855369),ln( ...

  4. @atcoder - ABC133F@ Colorful Tree

    目录 @description@ @solution - 1@ @accepted code - 1@ @solution - 2@ @accepted code - 2@ @details@ @de ...

  5. 2016年开源软件排名TOP50，最受IT公司欢迎的50款开源软件

    2016年开源软件排名TOP50,最受IT公司欢迎的50款开源软件 过去十年间,许多科技公司已开始畅怀拥抱开源.许多公司使用开源工具来运行自己的 IT 基础设施和网站,一些提供与开源工具相关的产品和服 ...

  6. 禁用gpu首选

    import osos.environ["CUDA_DEVICE_ORDER"] = "PCI_BUS_ID"os.environ["CUDA_VIS ...

  7. oracle用WHERE替代ORDER BY

    ORDER BY 子句只在两种严格的条件下使用索引. ORDER BY中所有的列必须包含在相同的索引中并保持在索引中的排列顺序. ORDER BY中所有的列必须定义为非空. WHERE子句使用的索引和 ...

  8. H3C ISDN DCC基本配置示例

  9. [转]Netty实现原理浅析

    Netty是JBoss出品的高效的Java NIO开发框架,关于其使用,可参考我的另一篇文章netty使用初步.本文将主要分析Netty实现方面的东西,由于精力有限,本人并没有对其源码做了极细致的研 ...

  10. laravel post提交数据时显示异常

    post提交数据时候显示如下: The page has expired due to inactivity. Please refresh and try again 这是由于在laravel框架中 ...