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

　　事件冒泡的原理：从实际操作的元素（事件）向上级父元素一级一级执行下去，直到达到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 常见的错误 和 解决方法

    1. Application does not specify an API level requirement! 解决方法:AndroidManifest.xml中 加入: <uses-sdk ...

  2. chrome谷歌浏览器怎么清除指定网站cookie

    https://jingyan.baidu.com/article/fa4125aced30cc28ac709230.html 在使用电脑的情况下,由于到部分网站的cookie的问题导致的部分功能失效 ...

  3. selenium webdriver学习（四）------------定位页面元素(转)

    selenium webdriver学习(四)------------定位页面元素 博客分类: Selenium-webdriver seleniumwebdriver定位页面元素findElemen ...

  4. uva 10253 Series-Parallel Networks （整数划分+多重集）

    UVa Online Judge 题意是计算给定数量的边通过串联并联两种方式,能组成多少种不同的网络.将它转化为一个树形结构,也就是求有多少不同构的树. 代码如下: #include <cstd ...

  5. windows 关闭端口被占用脚本

    cmd 关闭进程java taskkill /F /IM java.exe taskkill /f /im java.exe 如何用dat批处理文件关闭某端口对应程序-Windows自动化命令 如何用 ...

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

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

  7. X Samara Regional Intercollegiate Programming Contest

    A. Streets of Working Lanterns - 2 对于每个括号序列,存在一个\(mv\),表示要接上这个序列至少需要\(-mv\)个左括号,同时处理出接上这个序列后,左括号数量的增 ...

  8. java 集合之Arraylist的遍历及排序

    最近培训是先学习java基础 从最基本的开始学起 因为今天刚刚开博客 要把上周的一些重点内容归纳一下 1.Arraylist常用遍历以及排序 import java.util.ArrayList; i ...

  9. urlencode()与urldecode()

    urlencode()函数原理就是首先把中文字符转换为十六进制,然后在每个字符前面加一个标识符%. urldecode()函数与urlencode()函数原理相反,用于解码已编码的 URL 字符串,其 ...

  10. java 利用TCP上传文件

    从客户端上传到服务器端,其实本质上也就是复制! package july76net; //上传文件(文本) import java.io.BufferedReader; import java.io. ...