JS事件冒泡、停止冒泡、addEventListener--实例演示
问题：
<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--实例演示的更多相关文章
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
- js事件流机制冒泡和捕获
JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...
- js 事件详解 冒泡
起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...
- js事件捕获和冒泡解析
<div id="box"> <div id="box2"> <p id="test">test< ...
- 在JS事件封装时，addEventListener()方法的this问题
最近在写js的类库,模仿的是jquery的编程风格,当封装到事件监听的时候发现遇到了一个问题,代码是这样的: 上面是封装的一个事件委托的代码,我以为上面的封装跟普通的事件监听一样简单,结果我在调用时发 ...
- javascript的阻止默认事件和阻止冒泡事件
这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为 在说事件冒泡之前 ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- JS Event事件流（冒泡机制、捕获机制、事件绑定）
1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...
- js 事件冒泡、捕获；call()、apply()
他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事件触发顺序是 ...
随机推荐
- oracle_表分区
一. 分区表理论知识 Oracle提供了分区技术以支持VLDB(Very Large DataBase).分区表通过对分区列的判断,把分区列不同的记录,放到不同的分区中.分区完全对应用透明. Orac ...
- jquery 直接调用 wcf，面向服务的SOA架构 （ 第二天）
在前面的基础上,我们来开始第二天编写 客户端 的东西,不过讲之前,我想告诉大家的是: 这个简单的SOA的架构,我们直接通过wcf 调用到 后台的方法, 而中间没有使用 C#代码,大大减少我们客户端的代 ...
- SQL Server 板机
触发器是一种特殊类型的存储过程.们介绍的存储过程. 触发器主要是通过事件进行触发被自己主动调用运行的. 而存储过程能够通过存储过程的名称被调用. Ø 什么是触发器 触发器对表进行插入.更新.删除的时候 ...
- MVC验证10-到底用哪种方式实现客户端服务端双重异步验证
原文:MVC验证10-到底用哪种方式实现客户端服务端双重异步验证 本篇将通过一个案例来体验使用MVC的Ajax.BeginForm或jQuery来实现异步提交,并在客户端和服务端双双获得验证.希望能梳 ...
- cocos2d-x 3.0 rapidJson 解析操作应该注意的细节
Size visibleSize = Director::getInstance()->getVisibleSize(); Point origin = Director::getInstanc ...
- Performing User-Managed Database-18.4、Restoring Datafiles and Archived Redo Logs
18.4.Restoring Datafiles and Archived Redo Logs 假定介质故障损坏的一个或多个数据文件,数据文件必须恢复损坏的文件之前恢复. 该位置是不是想恢复原来姿势. ...
- C# 标签(条码)
C# 标签(条码) 上一篇说到条码的打印,主要是通过读取模板定义文件(XML文件),然后结合从数据库中读取的动态数据结合而产生条码.下面主要说一下如何设计这个条码模板.设计过程也很简单,只需要简单的拖 ...
- restrict
restrict是c99标准引入的,它只可以用于限定和约束指针,并表明指针是访问一个数据对象的唯一且初始的方式.即它告诉编译器,所有修改该指针所指向内存中内容的操作都必须通过该指针来修改,而不能通过其 ...
- JQuery Smart UI
JQuery Smart UI 个人开发的一套使用htm+js的开发框架 SmartUI2.0后续声明 摘要: 感谢很多朋友关注,因为今年一直在另外一个公司做顾问,网络环境管制相当严格,所以一直没有更 ...
- Android-异步图像装载机
在ListView加载图像是非常常见的场景,图像加载几个要求满足以下的: (1)是否画面位于网络或本地上,装载不应同步.但应该异步加载,例如,使用AsyncTask. (2)为了避免重复下载图片和网页 ...