什么时候存在这种问题？
当一个行为触发了多个对象的事件时。
 
<body>
  <div class="fa">
    <div class="son1">
      <div class="son2"></div>
    </div>
  </div>
  <script type="text/javascript">
    var fa = document.getElementsByClassName('fa')[0];
    var son1 = document.getElementsByClassName('son1')[0];
    var son2 = document.getElementsByClassName('son2')[0];
    fa.addEventListener("click",function(e){console.log('fa');e.stopPropagation();},true);
    son1.addEventListener('click',function(){console.log('son1')},false);
    son2.addEventListener('click',function(){console.log('son2')},true);
  </script>
addEventListener第三个参数不写时默认为false，true代表在事件捕获阶段执行，false代表在事件冒泡阶段执行。
e.stopPropagation()可以让一个行为只执行一个对象的事件。

js中事件冒泡和事件捕获的更多相关文章

  1. JS中绑定事件顺序（事件冒泡与事件捕获区别）

    在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...

  2. JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  3. JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

    先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...

  4. JS事件（事件冒泡和事件捕获）

    事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...

  5. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  6. JS事件冒泡与事件捕获怎么理解?

    在js中存在事件冒泡与事件捕获两种概念,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. 事件冒泡(dubbed bubbling) 事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定 ...

  7. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  8. js 事件冒泡和事件捕获

    事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...

  9. js高级：event，事件冒泡，事件捕获

    1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...

  10. 彻底弄懂JS的事件冒泡和事件捕获（不推荐阅读）

    由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...

随机推荐

  1. ACGAN 论文笔记

    <Conditional Image Synthesis With Auxiliary Classifier GANs> Odena A, Olah C, Shlens J. Condit ...

  2. 解决axios IE11 Promise对象未定义

    在你的项目中安装polyfill Babel Polyfill 按照官网方法安装并引入即可 http://blog.csdn.net/panyox/article/details/76377248

  3. [笔记]如何将已存在的JAVA添加到当前ECLIPSE JAVA工程中

    找到路径.ctrl C .ctrl V F5就行了

  4. win8 使用notepad++写C代码

    1. 安装mingw,这里有个不错的教程 http://www.metsky.com/archives/588.html 2. 在notepad++里做设置, 安装nppexec: nppexec-& ...

  5. Phpstorm安装和优化

    Phpstorm是php开发一个强大的IDE,但是它不是免费的需要注册码,而且界面是英文界面,对英文不太好的人有点不友好.所以这篇文章主要从phpstorm的破解和汉化来优化phpstorm. 1.首 ...

  6. _bzoj2243 [SDOI2011]染色【树链剖分】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2243 裸的树链剖分,最开始我保存一个线段树节点的color值时(若有多种颜色则为-1),不小 ...

  7. android将对象序列化到文件：直接写文件与用Serializable接口的对比

    1.用文件读写1024个对象的日志 10-09 16:12:44.493 6385-6385/com.example.tt.downtest D/Serializable_TAG: write 102 ...

  8. Android开发学习——高德地图的实现

    1.首先做好下边的准备: 1.1  http://lbs.amap.com/   注册账号 1.2  下载 定位sdk 和 地图sdk 下载后是这样的 1.3  对下载的进行解压 将他们加入 中,对每 ...

  9. Swiper插件轮播

    <html><head> <meta charset="utf-8"> <title>Swiper轮播</title>& ...

  10. React全家桶之一 react-router之高级

    使用query获取URL中的参数 //引入相关的依赖 const Page = props => <div> <h1>{props.location.query.mess ...