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 相关文章推荐
绑定回车enter事件代码
May 18 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
react-native android状态栏的实现
Jun 15 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 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初学者最感迷茫的问题小结
2010/03/27 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php生成与读取excel文件
2016/10/14 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
js获取div高度的代码
2008/08/09 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
Django基础知识与基本应用入门教程
2018/07/20 Python
用Django写天气预报查询网站
2018/10/21 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
Django缓存Cache使用详解
2020/11/30 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
施工班组长岗位职责
2014/01/05 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
导游词之镇江焦山
2019/11/21 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
MySQL插入数据与查询数据
2022/03/25 MySQL
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript