JavaScript 获取事件对象的注意点


Posted in Javascript onJuly 29, 2009

平时我们获取事件对象一般写法如下:

function getEvent(event) { 
return event || window.event // IE:window.event 
}

如果没有参数,也可写成(非IE :事件对象会自动传递给对应的事件处理函数,且为第一个参数):
function getEvent() { 
return arguments[0] || window.event // IE:window.event 
}

这样的写法在除 Firefox(测试版本:3.0.12,下同) 外的浏览器上运行都不会有问题,但 Firefox 为什么例外呢?让我们这样一种情形:
<button id="btn" onclick="foo()">按钮</button> 
<script> 
function foo(){ 
var e = getEvent(); 
alert(e);} 
</script>

运行结果在 Firefox 中是 undefined,为什么呢?
在 Firefox 中调用其实是这样的,先调用执行的是:
function onclick(event) { 
foo(); 
}

然后调用执行的是:
function foo(){ 
var e = getEvent(); 
alert(e); 
}

会发现在 Firefox 下 onclick="foo()" 中的 foo() 无法自动传入事件对象参数,而默认传递给了系统生成的 onclick 函数,那本例我们可以通过getEvent.caller.caller.arguments[0] 获得事件对象。
因此,我们的 getEvent 可以优化成(参照 yui_2.7.0b 中的 event/event-debug.js 中 getEvent 方法):
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; 
}

当然还有一个很简单的解决方法,就是手动将参数传递给 onclick="foo()":
<button id="btn" onclick="foo(event)">按钮</button>

Javascript 相关文章推荐
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
简单实现js浮动框
Dec 13 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 Javascript
javascript CSS画图之基础篇
Jul 29 #Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 #Javascript
JavaScript 设计模式学习 Factory
Jul 29 #Javascript
JQuery UI皮肤定制
Jul 27 #Javascript
JavaScript 设计模式学习 Singleton
Jul 27 #Javascript
xml 封装与解析(javascript和C#中)
Jul 26 #Javascript
JavaScript 捕获窗口关闭事件
Jul 26 #Javascript
You might like
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
2018/11/08 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python实现堆排序的方法详解
2016/05/03 Python
Python变量赋值的秘密分享
2018/04/03 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
opencv 阈值分割的具体使用
2020/07/08 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
如何写好建议书
2014/03/13 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
保护环境的标语
2014/06/09 职场文书
初中家长评语大全
2014/12/26 职场文书
国际贸易实训总结
2015/08/03 职场文书
Java基础——Map集合
2022/04/01 Java/Android
Go 内联优化让程序员爱不释手
2022/06/21 Golang