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利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
学习ExtJS Column布局
2009/10/08 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
javascript读写json示例
2014/04/11 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
详解JavaScript函数
2015/12/01 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
详解VUE中v-bind的基本用法
2017/07/13 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python基于ID3思想的决策树
2018/01/03 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Python中bisect的使用方法
2019/12/31 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
python excel和yaml文件的读取封装
2021/01/12 Python
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
公司董事长职责
2013/12/12 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
小学班主任评语
2014/12/29 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
详解Python中的进程和线程
2021/06/23 Python