问题：

 <div class='item' id='outer' onclick="alert('outer')">

    <div class='item' id='inner' onclick="alert('inner');">

      <div class='item' id='core' onclick="alert('core')">

         core!!!!!

      </div>

    </div>

  </div>

1.上面div中，如果单击core，会执行多少个alert？先后顺序是什么？

该问题的答案取决于浏览器的对事件处理的机制。对于下图的结构，当两个element都绑定了onclick方法时，执行的顺序是什么？

-----------------------------------

| element1                        |

|   -------------------------     |

|   |element2               |     |

|   -------------------------     |

|                                 |

-----------------------------------
  • Netscape主张元素1的事件首先发生，这种事件发生顺序被称为捕获型
  • 微软则保持元素2具有优先权，这种事件顺序被称为冒泡型
  • DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。

冒泡型：

1.对于某个节点，触发的一个事件， 会首先执行当前这个dom节点绑定的方法

2.执行完毕后，会冒泡至改节点的父节点，执行相应的函数

3. 重复以上过程，直至Dom的根节点。

对于上文中的例子， 单击#core,

1.首先触发alert('core')

　  2.然后冒泡至#inner节点，触发alert('inner')

3.最后冒泡至#outer节点，触发alter('outer')

假设对于#inner,我们未为onclick事件指定方法，那么在第二步，不会有方法执行，但是click的事件，仍会继续冒泡至最外层的#outer.

捕获型

事件捕获的顺序刚好与之相反

　　1.当一个事件发生时，最外层的已绑定该事件的方法会执行

　　2.然后该事件会下降至他的子节点，触发相应的方法

　　3.重复1,2的过程

如何加入一个捕获型/冒泡型事件

  • 参照上文给出的例子，我们直接在html中绑定事件方法， 这个事件就是冒泡型事件
 <div class='item' id='outer' onclick="alert('outer')">
  • 当采用原生Javascript（非Jquery）方法， 我们使用addEventListener绑定事件 当第三个参数是false的时候， 这个事件就是冒泡型事件(第三个参数的默认值是false).以下两种写法等价。
core.addEventListener("click",function(){alert('dddddd')},false);
core.addEventListener("click",function(){alert('dddddd')});
  • 我们使用addEventListener绑定事件 当第三个参数是true的时候， 这个事件就是捕获型事件
core.addEventListener("click",function(){alert('dddddd')},true);
  • addEventListe
  • core.addEventListener("click",function(){alert('dddddd')},true);

2.  stopPropagation()是停止冒泡事件流。

当我们为一个事件绑定的方法中，添加一句stopPropagation,那么该事件的冒泡过程到此为止，其后的所有节点绑定事件都不执行；

3. 没有方法去停止捕获事件流，当然，从功能上看也即没必要，也不合理。

4.除去addEventListener之外,通过attachEvent也可以绑定事件，attachEvent有哪些参数，执行顺序是什么？使用哪种机制?如果同时使用addEventListener和attachEvent,执行顺序又是怎样的？

4.下面是代码，保存成html文件，看看效果；

<html>

<head>

  <style type="text/css">

     .item{

         display: table;

         margin: 100px;

     }

     #outer{

         width:400px;

         height:400px;

         background-color: blue;

     }

     #inner{

         vertical-align: middle;

         width:200px;

         height:200px;

         background-color: white;

     }

     #core{

         width:80px;

         height:80px;

         background-color: red;

         text-indent: 10px;

         line-height: 50px;

     }

  </style>

</head>

<body>

  <div class='item' id='outer' onclick="alert('outer')">

    <div class='item' id='inner' onclick="alert('inner');stopbubble(arguments[0])">

      <div class='item' id='core' onclick="alert('core')">

         core!!!!!

      </div>

    </div>

  </div>

</body>

<!--you must write <script> under <body>-->

<script type='text/javascript'>

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

        core.addEventListener("click",function(){alert('dddddd')},false);

        //addEventListener: can add one more event to node "core"

        function stopbubble(e){

              e.stopPropagation();//stop bubble event on this node

        }

</script>

</html>

前端效果：

点击core！！！后：
1.先alert core 因为绑定了dddd，然后会alert  dddd；

2.然后冒泡到inner节点后，alert inner，但是同时执行stopbubble(arguments[0])来停止冒泡；

3.停止冒泡后，该node后续节点就不执行了，所以不会alert outer；

JS事件冒泡、停止冒泡、addEventListener--实例演示的更多相关文章

  1. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  2. js事件流机制冒泡和捕获

    JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...

  3. js 事件详解 冒泡

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...

  4. js事件捕获和冒泡解析

    <div id="box"> <div id="box2"> <p id="test">test< ...

  5. 在JS事件封装时，addEventListener()方法的this问题

    最近在写js的类库,模仿的是jquery的编程风格,当封装到事件监听的时候发现遇到了一个问题,代码是这样的: 上面是封装的一个事件委托的代码,我以为上面的封装跟普通的事件监听一样简单,结果我在调用时发 ...

  6. javascript的阻止默认事件和阻止冒泡事件

    这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为   在说事件冒泡之前 ...

  7. js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...

  8. JS Event事件流（冒泡机制、捕获机制、事件绑定）

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  9. js 事件冒泡、捕获；call()、apply()

    他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事件触发顺序是 ...

随机推荐

  1. BZOJ 1025 SCOI2009 游戏 动态规划

    标题效果:特定n.行定义一个替代品1~n这种更换周期发生后,T次要(T>0)返回到原来的顺序 找到行的所有可能的数 循环置换分解成若干个,然后行位移数是这些周期的长度的最小公倍数 因此,对于一些 ...

  2. linux_vim_最佳快捷键

    如何使用vi文本编辑器     vi由比尔·乔伊(Bill Joy)撰写,所有UNIX like均默认安装此文本编辑器.详细简介请点击维基中文. 1.首先复制一个文件到/tmp目录(本例中为复制根目录 ...

  3. [LeetCode] 033. Search in Rotated Sorted Array (Hard) (C++)

    指数:[LeetCode] Leetcode 解决问题的指数 (C++/Java/Python/Sql) Github: https://github.com/illuz/leetcode 033. ...

  4. 只有有lua编译能力不足200K代码吧？NO! Python 有可能。

    如今Python给人的感觉是大,东西多,在Windows上安装后竟然要占100多兆的空间. lua给人的感觉是非常小,非常轻便.Python 2.7在linux下编译出来的代码在strip之后也有3M ...

  5. ThinkPHP神秘应用架构扩展

    ThinkPHP应用模式提供了机会,改变核心框架.它可以让你的应用程序,以适应环境和其他许多不同的需求. 每一个应用模式都有自己的模式定义文件,相对与ThinkPHP3.1版本号.ThinkPHP3. ...

  6. Swift语言指南(五)--数字字面量和数字类型转换

    原文:Swift语言指南(五)--数字字面量和数字类型转换 数字字面量 整数字面量写法如下: · 十进制数,无前缀 · 二进制数,以 0b 为前缀 · 八进制数,以 0o 为前缀 · 十六进制数,以 ...

  7. .net的自定义JS控件，运用了 面向对象的思想 封装 了 控件(.net自定义控件开发的第一天)

    大家好!我叫刘晶,很高兴你能看到我分享的文章!希望能对你有帮助! 首先我们来看下几个例子 ,就能看到 如何 自定义控件! 业务需求: 制作  一个   属于 自己的    按钮 对象    ,然后 像 ...

  8. HDU 4228 Flooring Tiles 反素数

    推出了结论,万万没想到最后用搜索.. 还想dp来着.. #include <cstdio> #include <cstring> #include <iostream&g ...

  9. SQL常规查询详解

    一.交叉连接(cross join) 交叉连接(cross join):有两种,显式的和隐式的,不带on子句,返回的是两表的乘积,也叫笛卡尔积. 例如:下面的语句1和语句2的结果是相同的. 语句1:隐 ...

  10. 基于protobuf的RPC实现

    可以比较使用google protobuf RPC实现echo service可见.述. google protobuf仅仅负责消息的打包和解包.并不包括RPC的实现.但其包括了RPC的定义.如果有以 ...