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

　　事件冒泡的原理：从实际操作的元素（事件）向上级父元素一级一级执行下去，直到达到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. oracle函数 floor(x)

    [功能]返回小于等于x的最大整数值 [参数]x,数字型表达式 [返回]数字 [示例] select floor(3.1),floor(2.8+1.3),floor(0) from dual; 返回4, ...

  2. 使用git和sourcetree提交代码的一些问题

    今天遇到的几个坑算是解决了1.开始不能用指令提交,可以执行git add命令前添加gitdir=$(git rev-parse --git-dir); scp -p -P 29418 wangtao1 ...

  3. 2016国产开源软件Top100(Q1)

    2016国产开源软件Top100(Q1) 随着互联网的发展.开放标准的普及和虚拟化技术的应用等诸多IT新领域的创新及拓展,开源技术凭借其开放性.低成本.稳定性.灵活性.安全性和技术创新性等特点迅速走向 ...

  4. Android中使用lambda表达式

    lambda 语法简介 视频为本篇播客知识点讲解,建议采用超清模式观看, 欢迎点击订阅我的优酷 如果刚学Android,不知道怎么写点击事件可以跳转,传送门 要想在Android中使用lambda语法 ...

  5. bnu 52037 Escape from Ayutthaya

    Escape from Ayutthaya Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on CodeFo ...

  6. windonws卸载已安装opencv，安装新版本

    主要步骤: 步骤一:卸载opencv-python(如果还有安装opencv-contrib-python,也需要卸载) 步骤二:安装新的opencv-python及opencv-contrib-py ...

  7. Keras框架下的保存模型和加载模型

    在Keras框架下训练深度学习模型时,一般思路是在训练环境下训练出模型,然后拿训练好的模型(即保存模型相应信息的文件)到生产环境下去部署.在训练过程中我们可能会遇到以下情况: 需要运行很长时间的程序在 ...

  8. Python--day62--ORM的使用

    4.Django里ORM的使用 1,手动创建数据库 2,在settings.py里面,配置数据库的连接信息 3,在项目/__init__.py告诉Django用pymysql模块代替MySQLdb(不 ...

  9. JAVA配置系统变量

    CLASSPATH= .;%JAVA_HOME%/lib/dt.jar;%JAVA_HOME%/lib/tools.jar JAVA_HOME = C:/Program Files/Java/jdk1 ...

  10. “浪潮杯”第九届山东省ACM大学生程序设计竞赛（重现赛）E.sequence（树状数组求逆序对（划掉））

    传送门 E.sequence •题意 定义序列 p 中的 "good",只要 i 之前存在 pj < pi,那么,pi就是 "good": 求删除一个数, ...