脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 事件处理函数

js 事件处理函数间的Event物件是否全等

 更新时间：2011年04月08日 00:03:33   作者：  
在非IE，事件对象Propagation之间的处理函数，或同dom节点触发的多个函数之间的Event物件是全等的。与绑定形式[addEventListener/DOM0]无关。
这个小问题以前就遇到，却没有去总结
现在又遇到，为了得到准确结论，记录下来：
如题:同一事件 多个执行函数间的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鼠标移动事件以及实战案例

    在学习JS中我对鼠标移动事件进行了一些总结,需要的可以作参考,下面这篇文章主要给大家介绍了关于JavaScript鼠标移动事件以及实战案例的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • js跳转到指定url的方法与实际使用

    js跳转到指定url的方法与实际使用

    这篇文章主要给大家介绍了关于js跳转到指定url的方法与实际使用的相关资料,要实现JavaScript跳转到指定URL,可以使用window.location对象来实现,需要的朋友可以参考下
    2023-09-09
  • 实例分析js事件循环机制

    实例分析js事件循环机制

    这篇文章主要介绍了js事件循环机制，并通过实例分析了用法和技巧，一起学习分享下。
    2017-12-12
  • JS实现获取各种格式的时间

    JS实现获取各种格式的时间

    在 JavaScript 中，可以使用内置的 Date 对象来获取当前时间，并根据需要格式化成不同的时间格式，下面就跟随小编一起来看看具体的使用吧
    2023-08-08
  • js获取键盘按键响应事件(兼容各浏览器)

    js获取键盘按键响应事件(兼容各浏览器)

    js获取键盘按键响应事件(兼容各浏览器)，需要的朋友可以参考一下
    2013-05-05
  • 微信小程序实现底部导航

    微信小程序实现底部导航

    这篇文章主要为大家详细介绍了微信小程序自定义底部导航，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 原生JS检测CSS3动画是否结束的方法详解

    原生JS检测CSS3动画是否结束的方法详解

    这篇文章主要介绍了原生JS检测CSS3动画是否结束的方法,结合实例形式分析了javascript事件响应及针对css3属性检测相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • layui(1.0.9)文件上传upload,前后端的实例代码

    layui(1.0.9)文件上传upload,前后端的实例代码

    今天小编就为大家分享一篇layui(1.0.9)文件上传upload,前后端的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序订阅消息(java后端实现)开发

    微信小程序订阅消息(java后端实现)开发

    这篇文章主要介绍了微信小程序订阅消息(java后端实现)开发，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • JS 毫秒转时间示例代码

    JS 毫秒转时间示例代码

    毫秒转时间的方法有很多，在本文将为大家介绍下js中是如何实现的，感兴趣的朋友可以参考下
    2013-09-09

最新评论