JavaScript Event事件对象获取方法详解

作者:交互手记

时间:2026-10-25

浏览:461

本文介绍在JavaScript中获取Event事件对象的统一方法,重点解析如何通过window.event及函数调用栈(caller/arguments)兼容不同浏览器环境。针对YUI源码中关于Event与MouseEvent构造函数的判断逻辑进行说明,并提供完整的代码实现示例,帮助开发者解决事件对象获取的兼容性问题。

文章目录
 <html> <head> <title></title> </head> <body> <div id="contentq" onclick="bb(event)"><!--显示传入event对象--> fasdf </div> </body>  </html> 

注意:若引入外部JavaScript文件,需刷新页面后方可执行相关代码。


获取事件对象的统一方法

以下是从网络资源整理得到的获取事件对象的统一方法。


// 复制代码

具体实现代码如下所示:

 
核心代码实现function getEvent(event) {
var ev = event || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && (Event == ev.constructor || MouseEvent == ev.constructor)) { // 注:YUI源码存在BUG,ev.constructor也可能是MouseEvent,不局限于Event
break;
} 
c = c.caller;
} 
} 
return ev;
} 

调用示例

调用该函数的执行示例如下:


// 复制代码

代码如下:

 
function foo(){
var e = getEvent();
alert(e);
} 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章