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 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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
php设计模式 Mediator (中介者模式)
2011/06/26 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
python网络爬虫采集联想词示例
2014/02/11 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
加热夹克:RAVEAN
2018/10/19 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
山楂树之恋观后感
2015/06/11 职场文书
毕业欢送会致辞
2015/07/29 职场文书