关于javascript DOM事件模型的两件事


Posted in Javascript onJuly 22, 2010

事件捕捉(Event Capture)的实现问题

W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling)。下面这个图能大概的说明整个过程:
关于javascript DOM事件模型的两件事
(from W3C)

如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了。例如:

document.getElementById('foo').addEventListener('click',function(){alert('Hello, world!');},true);

前一阵因为想弄懂事件捕捉,所以做了点小实验,分别在Firefox 2、Safari 3 on Windows和Opera 9上实践了事件捕捉(当然,因为IE不支持事件捕捉,所以…),实验的原理见下图:
关于javascript DOM事件模型的两件事
ID为div1和div2的两个元素都被绑定了捕捉阶段的事件处理函数,这样:

当点击#div1(蓝色区域)时,应该会alert出”div1″
当点击#div2(黄色区域)时,应该会先alert出”div1″,再alert出”div2″,因为在事件捕捉阶段,事件是从根元素向下传播的,#div1是#div2的父元素,自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
然而,以上的设想只试用于Firefox 2和Safari 3 on Windows,在Opera 9中,事情会变成这样:

当点击#div1(蓝色区域)时,什么都不会发生
当点击#div2(黄色区域)时,会alert出”div1″,随后什么都不会再发生
可以看出,在Opera 9中,目标元素(TargetElement)的click事件没有被执行。通过Realazy(orz…)的指点,找到了这篇文章:《Event capture explained》,发现,原来Opera中的实现才是正确的。此文中有一段话如是说:

The DOM spec states that capturing events should not fire on target, because the idea of a capturing event is to detect events before they reach their targets. Because of bugs in Gecko and Safari, web content that is tested mostly with Firefox or other Gecko-based browsers sometimes expects capturing listeners to fire on target. Such content will fail in Opera 7, 8 and current releases of 9 because of its correct implementation of the standard.
大意是说:DOM规范中陈述了捕捉型的事件不应该在目标元素上被执行,因为捕捉型事件的用意就是为了监测到达目标元素之前的事件。Firefox和Safari的实现都是带有bug的。

再来看看W3C的DOM Events规范中的原话:

A capturing EventListener will not be triggered by events dispatched directly to the EventTarget upon which it is registered.
所以,在整个事件传播中,被执行的顺序是:

父元素中所有的捕捉型事件(如果有)自上而下地执行
目标元素的冒泡型事件(如果有)
父元素中所有的冒泡型事件(如果有)自下而上地执行
在了解了这些后,也许还是不要使用事件捕捉为妙,至少暂时不要。
IE的高级事件处理模型的问题
重复绑定
IE下没有addEventListener,但是也有自己的attachEvent,即所谓的Microsoft Model。二者的实现基本相同只是attachEvent的第一个参数(事件类型)需要加”on”,而addEventListener不用,另外attachEvent因为不支持事件捕捉,所以也没有第三个参数。

然而,attachEvent还有一个很要命的问题:重复绑定事件。(这是从ppk on JavaScript中学到的)

一个例子:

function sayHello(){ 
alert('Hello, world!'); 
} 
// W3C Model 
$('div1').addEventListener('click', sayHello, false); 
$('div1').addEventListener('click', sayHello, false); 
// Microsoft Model 
$('div1').attachEvent('onclick', sayHello); 
$('div1').attachEvent('onclick', sayHello);

在W3C模型中,相同事件处理函数的绑定会被忽略,也就是说第二个$('div1').addEventListener('click', sayHello, false);会被忽略。

而在Microsoft模型中,第二个$('div1').attachEvent('onclick', sayHello);同样会被执行,所以,当你点击#div1的时候,alert框会弹出来两次。更有甚者,在detachEvent时候,也同样要detachEvent两次才能彻底把sayHello从#div1的click事件中删除。

为什么不继续使用alertID()了?
这是因为IE的事件模型的另一个缺陷,在alertID中,使用了this关键字来指代被绑定了该事件处理函数的元素,这样,在W3C模型中,alertID中的this指代了#div1或者#div2。

但是在Microsoft模型中,缺少了对this的支持后,this.id就会变为undefined,因为这时候this指代了window对象。

Javascript 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
Node.js实现文件上传
Jul 05 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
小程序实现抽奖动画
Apr 16 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
JavaScript 事件系统
Jul 22 #Javascript
(function($){...})(jQuery)的意思
Jul 22 #Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 #Javascript
一个简单的js动画效果代码
Jul 20 #Javascript
dess中一个简单的多路委托的实现
Jul 20 #Javascript
js 返回时间戳所对应的具体时间
Jul 20 #Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 #Javascript
You might like
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
详解php中的implements 使用
2017/06/13 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python实现屏保计时器的示例代码
2018/08/08 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
python数据库编程 ODBC方式实现通讯录
2020/03/27 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
《独坐敬亭山》教学反思
2014/04/08 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
感恩父母主题班会
2015/08/12 职场文书
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server