什么时候存在这种问题？
当一个行为触发了多个对象的事件时。
 
<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. 洛谷P1552 [APIO2012]派遣（左偏树）

    传送门 做这题的时候现学了一波左偏树2333(好吧其实是当初打完板子就给忘了) 不难发现肯定是选子树里权值最小的点且选得越多越好 但如果在每一个点维护一个小根堆,我们得一直找知道权值大于m为止,时间会 ...

  2. Python Flask 实现移动端应用接口（API）

    引言 目前,Web 应用已形成一种趋势:业务逻辑被越来越多地移到客户端,逐渐完善为一种称为富互联网应用(RIA,rich Internet application)的架构.在 RIA 中,服务器的主要 ...

  3. [浏览器美化]去除 Firefox 当前选中标签页顶端的线条

    Firefox 当前选中的标签页的最上方会显示有一条线,我觉得很丑,如图: 在地址栏输入 about:support ,然后点击打开目录. 在此目录中创建一个 chrome 文件夹(若没有),然后进入 ...

  4. JQuery模板插件-jquery.tmpl

    转载:https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQ ...

  5. C语言atoi()函数：将字符串转换成int(整数)

    头文件:#include <stdlib.h> atoi() 函数用来将字符串转换成整数(int),其原型为:int atoi (const char * str); [函数说明]atoi ...

  6. [Usaco2006 Jan] Dollar Dayz 奶牛商店

    Description 约翰到奶牛商场里买工具．商场里有K(1≤K≤100).种工具,价格分别为1,2,-,K美元．约翰手里有N(1≤N≤1000)美元,必须花完．那他有多少种购买的组合呢? Inpu ...

  7. Hdu 3294 Girls' research (manacher 最长回文串)

    题目链接: Hdu 3294  Girls' research 题目描述: 给出一串字符串代表暗码,暗码字符是通过明码循环移位得到的,比如给定b,就有b == a,c == b,d == c,.... ...

  8. LoadRunner_11破解教程完整版

    2017.12.17更正 qtm的LR11,如果是win10版本的电脑而且ie浏览器是11以上的请到loadrunner官网下载社区免费版,支持google,firefox,edge,ie11四大浏览 ...

  9. 水题 Codeforces Round #308 (Div. 2) A. Vanya and Table

    题目传送门 /* 水题:读懂题目就能做 */ #include <cstdio> #include <iostream> #include <algorithm> ...

  10. Android系统的启动流程

    手机启动后首先会通过执行BootLoader来启动Linux内核,BootLoader是所有嵌入式设备开机启动执行的第一行代码,linux内核在启动过程中会加载各种设备的驱动同时初始化数据结构,并且开 ...