js 事件处理函数间的Event物件是否全等


Posted in Javascript onApril 08, 2011

这个小问题以前就遇到,却没有去总结
现在又遇到,为了得到准确结论,记录下来:
如题:同一事件 多个执行函数间的Event物件是否全等

例如:

dom.addEvent('click',fna); 
dom.addEvent('click',fnb);

1:在fna里对Event物件添加的属性,在其后执行的fnb函数里是对于Event物件是否能访问到?
2:执行fna/fnb函数时的Event物件是否全等 Eventfna===Eventfnb ?

标准的文档太长哪里是说明了这里的规则呢?懒吧...

对于Jquery,同一事件,多个执行函数间的Event物件是全等的。
Jquery live绑定事件的实现里,对于可能会被重复执行的函数liveHandler,依靠额外给Event物件的liveFired属性,使得在第一次之后执行的liveHandler 的开始 即退出函数:

if (event.liveFired === this || ...) { 
return; 
} 
///.... 
event.liveFired = this;

测试:
function a(e) { 
e.abc = function() { 
alert(a); 
}; 
prevEvent = e; 
prevIeEvent=window.event; 
} 
function b(e,event) { 
e.abc(); //fn 
alert(e === prevEvent); //true 
if(event=window.event){ 
alert(event===e); //false 
alert(event===prevIeEvent);//false 
alert(event===prevEvent);//false 
} 
} 
var t = document.getElementById("p"); 
if (t.addEventListener) { 
t.addEventListener('click', a, false); 
t.addEventListener('click', b, false) 
} else { 
t.attachEvent('onclick', b); 
t.attachEvent('onclick', a) 
}

对于原生绑定事件方式[addEventListener,attachEvent],对于多个执行函数间的Event物件(通过参数传递的event)是全等的,在IE里,通过window.event形式得到的Event物件不全等。与通过参数传递的Event也不全等。
对于冒泡事件:
dom.addEvent('click',fna); 
domParentNode.addEvent('click',fnb);

jquery里,在以trigger形式触发事件时,冒泡事件之间的函数中的Event物件是全等的。而实际用户行为触发的事件,则不是同一物件。自定义属性也传递不了。取值设置都都没有影响真正的originalEvent。
以原生绑定事件方式[addEventListener,attachEvent]:
function a(e) { 
e.abc = function() { 
alert(a); 
}; 
prevEvent = e; 
prevIeEvent=window.event; 
} 
function b(e,event) { 
alert(e.abc); //fn 
alert(e === prevEvent); //true 
if(event=window.event){ 
alert(event===e); //false 
alert(event===prevIeEvent);//false 
alert(event===prevEvent);//false 
} 
} 
var t = document.getElementById("p"); 
if (t.addEventListener) { 
t.addEventListener('click', a, false); 
document.body.addEventListener('click', b, false); 
} else { 
t.attachEvent('onclick', a); 
document.body.attachEvent('onclick', b); 
}

结果是attachEvent绑定事件时IE中冒泡事件之间的函数内Event物件不一致。FF等 以addEventListener 则全等对象。
事实上,在非IE,事件对象Propagation之间的处理函数,或同dom节点触发的多个函数之间的Event物件是全等的。与绑定形式[addEventListener/DOM0]无关。
而在IE,仅同dom节点触发的多个函数之间的通过参数传递的Event物件(attachEvent)是全等的。
Javascript 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 #Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 #Javascript
JavaScript中清空数组的三种方法分享
Apr 07 #Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 #Javascript
javascript各浏览器中option元素的表现差异
Apr 07 #Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 #Javascript
我的javascript 函数链之演变
Apr 07 #Javascript
You might like
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
Python环境变量设置方法
2016/08/28 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
python反扒机制的5种解决方法
2021/02/06 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
自考生自我鉴定范文
2013/10/01 职场文书
工商管理系学生的自我评价分享
2013/11/29 职场文书
服务员岗位责任制
2014/02/11 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
民事上诉状范文
2015/05/22 职场文书
运动会观后感
2015/06/09 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python