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实现的类似Google的Div拖动效果代码
Aug 09 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
Vue实现下拉加载更多
May 09 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 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水印技术
2007/02/14 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
JavaScript 比较时间大小的代码
2010/04/24 Javascript
Javascript事件实例详解
2013/11/06 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
英语邀请函范文
2015/02/02 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
2019 入党申请书范文
2019/07/10 职场文书
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL