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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
javascript中join方法实例讲解
Feb 21 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
Vue formData实现图片上传
2019/08/20 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
Python:slice与indices的用法
2019/11/25 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
10个顶级Python实用库推荐
2021/03/04 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
DataList 能否分页,请问如何实现?
2015/05/03 面试题
安全检查与奖惩制度
2014/01/23 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
专题组织生活会方案
2014/06/15 职场文书
介绍信的格式
2015/01/30 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android