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表单验证插件formValidator(改进版)
Feb 03 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
vue2实现provide inject传递响应式
May 21 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类
2006/07/15 PHP
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
在Javascript中 声明时用"var"与不用"var"的区别
2013/04/15 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
python多线程扫描端口示例
2014/01/16 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
快速查询Python文档方法分享
2017/12/27 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python实现猜拳小游戏
2020/04/05 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
html5时钟实现代码
2010/10/22 HTML / CSS
中年人生感言
2014/02/04 职场文书
微信营销策划方案
2014/02/24 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书