W3C对DOM2.0定义的标准事件
DOM2.0模型将事件处理流程分为三个阶段:
一、事件捕获阶段,
二、事件目标阶段,
三、事件起泡阶段。
具体如图(图片来源于网络,侵删)
事件捕获:当某个元素触发某个事件(如onclick),顶层对象document就会发出一个事件流,随着DOM树的节点向目标元素节点流去,直到到达事件真正发生的目标元素。在这个过程中,事件相应的监听函数是不会被触发的。
事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。
事件起泡:从目标元素开始,往顶层元素传播。途中如果有节点绑定了相应的事件处理函数,这些函数都会被一次触发。如果想阻止事件起泡,可以使用e.stopPropagation()(Firefox)或者e.cancelBubble=true(IE)来组织事件的冒泡传播。
解释:比方说:ul,li,p,a都绑定了一个click事件,被点击后执行弹出自己的nodeName
如果是捕获模式下的绑定那弹出顺序是:ul -> li -> p -> a.
如果是冒泡模式下的绑定那弹出顺序是:a -> p -> li -> ul.
chrome和ff浏览器的事件模式是冒泡
ie浏览器的事件模式是捕获
上边介绍的是w3c里的事件,
W3C标准中那个addEventListener()函数,它里面最后一个参数false代表冒泡,true代表捕获,这是什么意思呢?因为W3C作为一个标准,它选择了一个相对折中的方案去处理事件,也就是任何在W3C事件模型中发生的事件都先进入捕获阶段,然后在进入冒泡阶段,保证一个事件会经历这两个阶段,以适应IE和其他非IE浏览器,这样使用者可以根据需求选择将事件注册到哪一个阶段
代码在这里:
<ul id="ul">
<li id="li">
<p id="p">
<a id="a" href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
</p>
</li>
</ul> // 这是js代码
var ul = document.getElementById('ul');
var li = document.getElementById('li');
var p = document.getElementById('p');
var a= document.getElementById('a');
ul.addEventListener('click',function(e){
console.log("ul");
},true);
li.addEventListener('click',function(e){
console.log("li");
},true);
p.addEventListener('click',function(e){
console.log("p");
},true);
a.addEventListener('click',function(e){
console.log("a");
},true);
这里是执行结果:
捕获:
冒泡:
W3C对DOM2.0定义的标准事件的更多相关文章
- 什么是事件代理?DOM2.0标准事件模型的三个阶段
体验更优排版请移步原文:http://blog.kwin.wang/programming/js-event-delegation.html 事件代理,又称事件委托(Delegation),就是将处理 ...
- C# 标准事件模式
.NET框架为事件定义了一个标准模式,它的目的是保持框架和用户代码之间的一致性. 标准事件的模式核心是SystemEventArgs——预定义的没有成员的框架类(不同于静态Empty属性) Event ...
- shell编程:定义简单标准命令集
shell是用户操作接口的意思,操作系统运行起来后都会给用户提供一个操作界面,这个界面就叫shell,用户可以通过shell来调用操作系统内部的复杂实现,而shell编程就是在shell层次上进行编程 ...
- 如何给ActiveX控件添加“事件”“属性”“标准事件”“自定义事件”等一些相关操作
上一篇小编带大家熟悉了一下ActiveX的建立以及相关的概念,(http://blog.csdn.net/u014028070/article/details/38424611) 本文介绍下如何给控件 ...
- UNICODE 7.0定义的表情符
td.graph { font-size:24px; } UNICODE 7.0定义了78个表情符,从0x1F600到0x1F64F(其中0x1F643和0x1F644没有定义).下表中列出了这些表情 ...
- MSCRM4.0如何使js事件在批量编辑表单中触发
MSCRM4.0如何使js事件在批量编辑表单中触发 MSCRM4.0如何使js事件在批量编辑表单中触发 MSCRM3.0我们可以通过在onload事件加入以下代码来控制某个属性为只读.crmForm. ...
- C# 动态生成的按钮及定义按钮的事件的代码
内容闲暇时间,把内容过程中比较常用的内容备份一下,如下的内容内容是关于C# 动态生成的按钮及定义按钮的事件的内容,应该对码农们也有用途. HtmlGenericControl control = ne ...
- as3.0中如何阻止事件冒泡
原作者:菩提树下的杨过转载出处:http://yjmyzz.cnblogs.com 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究 ...
- 【OF框架】定义框架标准WebApi,按照规范返回状态信息及数据信息
准备 了解框架基本应用,已经完成Controller创建. 一.定义框架标准WebApi 一个标准的WebApi,包含预定义的入参和回参类型 入参为CallParams,需要增加FromBody声明, ...
随机推荐
- 第2月第4天 injection plugin for xcode
http://www.cocoachina.com/ios/20140530/8623.html http://www.jianshu.com/p/27be46d5e5d4
- hash-2.hashMap
1.HashMap的数据结构 a.HashMap是一个链表散列的结合体,即,数组和链表的结合体. b.HashMap类中定义了Entry类型的数组,Entry [ ] ,Entry有key value ...
- Android系统截屏的实现(附代码)
1.背景 写博客快两年了,写了100+的文章,最火的文章也是大家最关注的就是如何实现android系统截屏.其实我们google android_screen_ ...
- 访问者(Visitor)模式
http://www.cnblogs.com/zhenyulu/articles/79719.html 一. 访问者(Visitor)模式 访问者模式的目的是封装一些施加于某种数据结构元素之上的操作. ...
- Sqli-LABS通关笔录-10
好像咋整都没辙.实在是关卡越高越不好整. 弄报错.咋整咋不报错. and sleep(10);鸭蛋的也不好搞.实在没辙.就看源码了. 由代码得出payload: THE END
- Python自动化之sqlalchemy(修改和查询)
修改 my_user = Session.query(User).filter_by(name="alex").first() my_user.name = "Alex ...
- 5.8---像素设定(CC150)
注意:仔细注意位置. public static int[] renderPixel(int[] screen, int x, int y){ int[] ans = new int[screen.l ...
- Extjs PROXY查询params无法传参,改用extraParams
- OC block的简单使用
http://blog.csdn.net/itpeng523/article/details/23965147 一.先用Xcode创建一个空工程 学习block之前先用弄懂c语言的函数指针 看代码: ...
- 【Networking】Thrift and gRPC
参考资料: http://doc.oschina.net/grpc?t=60138 http://www.grpc.io/ https://thrift.apache.org/ https://git ...