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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
jquery禁用右键示例
Apr 28 Javascript
javascript封装简单实现方法
Aug 11 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 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定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
js window.event对象详尽解析
2009/02/17 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
季度思想汇报
2014/01/01 职场文书
保证书格式范文
2014/04/28 职场文书
人力资源求职信
2014/05/25 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
党员作风建设自查报告
2014/10/23 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
高三化学教学反思
2016/02/22 职场文书
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers