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学习网址备忘
May 29 Javascript
JSON 学习之完全手册 图文
May 29 Javascript
js切换光标示例代码
Oct 10 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
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
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
深入理解Python中的内置常量
2017/05/20 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
详解Python字典小结
2018/10/20 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
python通过实例讲解反射机制
2019/10/17 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
Python脚本调试工具安装过程
2021/01/11 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
年度考核自我鉴定
2014/03/19 职场文书
小学运动会报道稿
2014/10/04 职场文书
志愿者事迹材料
2014/12/26 职场文书
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
Flink 侧流输出源码示例解析
2022/09/23 Servers