什么时候存在这种问题？
当一个行为触发了多个对象的事件时。
 
<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. 2-17 numpy模块使用

    #CURD import numpy as np data1 = np.array([1,2,3,4,5]) print(data1) data2 = np.array([[1,2], [3,4]]) ...

  2. mybatise

    http://www.cnblogs.com/xdp-gacl/p/4261895.html

  3. java中static,super,final关键字辨析

    1:static关键字 利:1)对对象的共享数据提供单独的空间存储. 2)修饰的方法可以直接被类名调用 弊:1)生命周期长. 2)访问出现限制(只能访问静态) 它可以有静态方法,静态类,静态变量 2: ...

  4. bzoj 1084: [SCOI2005]最大子矩阵【dp】

    分情况讨论,m=1的时候比较简单,设f[i][j]为到i选了j个矩形,前缀和转移一下就行了 m=2,设f[i][j][k]为1行前i个,2行前j个,一共选了k个,i!=j的时候各自转移同m=1,否则转 ...

  5. 购买阿里云ECS+安装宝塔面板+Mac下怎么连接阿里云ECS服务器

    1.购买阿里云ECS 2.重置实例密码 这个有点对用户不友好,实际意思就是设置服务器的root登录密码 3.配置安全组放行端口 因为服务器需要从宝塔网站download安装包,包括一些常用的服务比如S ...

  6. [hdu1695] GCD【莫比乌斯反演】

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1695 先把题目转化为求一个数在区间[1, b / k],另一个数在区间[1, d / k]时,这两个数互 ...

  7. [ZPG TEST 116] 最小边权和【生成树相关】

    先将输入的边从小到大排序,对于一条边,它一定连接着两个联通块u与v,那么这条变对于答案的贡献是siz[u] * siz[v] * (边权 + 1) - 1,别问为什么这太显然了,一想就懂... #in ...

  8. 2、IO流的分类和IO流体系

  9. 对数组随机赋值，并输出（Arrays.toString(arr)）

    import java.util.Arrays; public class Demo { public static void main(String[] args) { int[] arr = ne ...

  10. 441 Arranging Coins 排列硬币

    你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币.给定一个数字 n,找出可形成完整阶梯行的总行数.n 是一个非负整数,并且在32位有符号整型的范围内.示例 1:n ...