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 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
javascript获取元素的计算样式
May 24 Javascript
详解vue 命名视图
Aug 14 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
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
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
Jquery 扩展方法
2010/05/06 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
如何开启linux的ssh服务
2015/02/14 面试题
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
电视节目策划方案
2014/05/16 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
同学会邀请函模板
2015/01/30 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
2015新学期家长寄语
2015/02/26 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
七一慰问简报
2015/07/20 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python