什么时候存在这种问题？
当一个行为触发了多个对象的事件时。
 
<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. TensorFlow博客翻译——用TensorFlow在云端进行机器学习

    https://github.com/tensorflow/tensorflow 原文地址 Machine Learning in the Cloud, with TensorFlow Wednesd ...

  2. maven仓库错误

    1.jai_core 时间:2018年3月21日10:04:57 URL:https://mvnrepository.com/artifact/javax.media/jai_core/1.1.3 / ...

  3. PCB Polar SI9000阻抗模型图片文字识别方法

    用过Polar SI9000的都知道,阻抗模型图片可以进行用户鼠标交互,那么它的是如何实现的呢,下面就讲一下如何实现此功能的方法   一.看看Polar SI9000阻抗模型图片交互效果 鼠标点击阻抗 ...

  4. Linux 常用命令十三 kill

    一.kill命令 kill命令用来删除执行中的程序或工作.kill可将指定的信息送至程序.预设的信息为SIGTERM(15),可将指定程序终止.若仍无法终止该程序,可使用SIGKILL(9)信息尝试强 ...

  5. bzoj 4552: [Tjoi2016&Heoi2016]排序【二分+线段树】

    二分值mid,然后把>=mid的赋值为1,其他赋值为0,每次排序就是算出区间内01的个数,然后分别把0和1放到连续的一段内,这些都可以用线段树来维护 二分的判断条件是操作完之后q位置上是否为1 ...

  6. 微信支付接口调用问题（android正常,iphone调不起）

    转自:http://blog.csdn.net/tt123123/article/details/53897035 碰到的问题 :根据微信提供的示例代码(ASP.NET),配置好一切后, 用andro ...

  7. play framework

    Compilation errorThe file {module:docviewer}/app/controllers/PlayDocumentation.java could not be com ...

  8. 《Windows核心编程系列》九谈谈同步设备IO与异步设备IO之同步设备IO

    同步设备IO 所谓同步IO是指线程在发起IO请求后会被挂起,IO完成后继续执行. 异步IO是指:线程发起IO请求后并不会挂起而是继续执行.IO完毕后会得到设备的通知.而IO完成端口就是实现这种通知的很 ...

  9. [POI2009]Tab

    Description 2个n\(\times\)m矩阵,保证同一个矩阵中元素两两不同.问能否通过若干次交换两行或交换两列把第一个矩阵变成第二个. Input 第一行正整数T(1≤T≤10)表示数据组 ...

  10. [ZPG TEST 115] 字符串【归类思想】

    pdf效果太差,转成word效果依旧差,只好转成jpg传了. 这一题用到了“归类”的思想,令s(i, a)表示前i个字体,字符a出现的次数.那么ans一定等于一个 (  s(i, a) - s(j, ...