什么是JS事件冒泡？：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理 程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。  

附一张图：

如何来阻止Js事件冒泡？

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>事件冒泡</title>

         <style type="text/css">

             #divOne{

                 width: 100px;

                 height: 100px;

                 border: 1px solid red;

             }

             #divTwo{

                 width: 200px;

                 height: 200px;

                 border: 1px solid red;

             }

         </style>

     </head>

     <body>

         <div id="divOne" onclick="alert('我是最外层');">

              <div id="divTwo" onclick="alert('我是中间层！')">

                  <a id="hr_three" href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a>

              </div>

         </div>

     </body>

 </html>

比如上面这个页面，

分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;

他们都有各自的click事件，最里层a标签还有href属性。

运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.

这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。

事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。

如何来阻止冒泡?

event.stopPropagation();

 <script type="text/javascript">

 //.event.stopPropagation();

 window.onload = function (){

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

     hr_three.addEventListener('click',fn,false);

 }

 function fn(event){

     event.stopPropagation();

 }

 </script>

再点击“点击我”，会弹出：我是最里层，然后链接到百度

如何来阻止默认?

event.preventDefault();

<script type="text/javascript">

//2.event.preventDefault();

window.onload = function (){

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

    hr_three.addEventListener('click',fn,false);

}

function fn(event){

    event.preventDefault();

}

</script>

再点击“点击我”，会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度.

它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

什么是JS事件冒泡？的更多相关文章

  1. js事件冒泡和事件委托

    js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...

  2. 什么是JS事件冒泡

    什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...

  3. 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  4. js事件冒泡和捕捉

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...

  5. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  6. 理解js事件冒泡事件委托事件捕获

    js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...

  7. js 事件冒泡、事件捕获、stopPropagation、preventDefault

    转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...

  8. JS事件冒泡及阻止

    事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...

  9. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

随机推荐

  1. Android Starting Window(Preview Window)

    当打开一个Activity时,如果这个Activity所属的应用还没有在运行,系统会为这个Activity所属的应用创建一个进程,但进程的创建与初始化都需要时间,在这个动作完成之前系统要做什么呢?如果 ...

  2. hibernate一对一主键双向关联

    关联是类(类的实例)之间的关系,表示有意义和值得关注的连接. 本系列将介绍Hibernate中主要的几种关联映射 Hibernate一对一主键单向关联Hibernate一对一主键双向关联Hiberna ...

  3. ajax-异步JavaScript和XML

    什么是ajax? ajax是异步的javascript和XML ( Asynchronous Javascript And XML ) 优点:节省用户操作时间,提高用户体验.减少数据请求次数. 什么是 ...

  4. iOS--高级技术

    1.iOS---搜索功能 2.iOS--通讯录.蓝牙.内购.GameCenter.iCloud.Passbook等系统服务开发汇总 3.iOS-技巧性总结 4.iOS-调试技巧 5.iOS-即时通讯- ...

  5. XML技术的应用

    XML技术的发展历史:gml--->sml--->html--->xml(可扩展标记语言). HTML和XML技术的区别: 1.HTML技术的标签不能自己定义,必须使用规定语法编写: ...

  6. Webstorm编译TypeScript

    下载webstorm 下载node.js编译器npm   Webstorm的安装很简单.但如果没有Java For Mac 环境打开Webstorm时会有提示,点击提示会跳转下载链接,下载安装就好. ...

  7. Chrome调试中的奇技淫巧

    网上有关Chrome调试的文章一搜一大堆,本文主要记录一下自己平时经常用并且又比较冷门的一些技巧. 打开Chrome调试工具 1.打开控制台的情况下,长按页面的“刷新”按钮可以选择按何种方式刷新(有正 ...

  8. 【分布式】Zookeeper在大型分布式系统中的应用

    一.前言 上一篇博文讲解了Zookeeper的典型应用场景,在大数据时代,各种分布式系统层出不穷,其中,有很多系统都直接或间接使用了Zookeeper,用来解决诸如配置管理.分布式通知/协调.集群管理 ...

  9. Dozer扫盲级教程

    前言 这篇文章是本人在阅读Dozer官方文档(5.5.1版本,官网已经一年多没更新了)的过程中,整理下来我认为比较基础的应用场景. 本文中提到的例子应该能覆盖JavaBean映射的大部分场景,希望对你 ...

  10. Java进击C#——应用开发之WinForm环境

    本章简言 上一章笔者讲到关于IO文件操作类,了解如何处理文件流.从这一章开始笔者将讲解相对比较高级的知识点.而本章笔者就对WinForm开发的知识点进行讲解和引导.现在很多业务都是面向于B/S模式的开 ...