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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
JS实现小星星特效
Dec 24 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
PHP 开发工具
2006/12/06 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
PyQt5每天必学之布局管理
2018/04/19 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
2014年教师节活动总结
2014/08/29 职场文书
大学生交通专业求职信
2014/09/01 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
自我推荐信格式模板
2015/03/24 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
python如何做代码性能分析
2021/04/26 Python