当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 获取事件对象的注意点

Javascript
JavaScript 语言精粹学习笔记
有关div页面拖动、缩放、关闭、遮罩效果代码
JQuery this 和 $(this) 的区别
JS 时间显示效果代码
jquery 表单进行客户端验证demo
JS 获取span标签中的值的代码 支持ie与firefox
JavaScript 获取用户客户端操作系统版本
可以读取EXCEL文件的js代码
JS去除字符串的空格增强版(可以去除中间的空格)
监控用户是否关闭浏览器的js代码
javascript 继承实现方法
JSON 入门指南 想了解json的朋友可以看下
javascript 函数调用规则
动态表格Table类的实现
JSON 客户端和服务器端的格式转换
jQuery ui1.7 dialog只能弹出一次问题
javascript 遍历验证所有文本框的值
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
javascript 简练的几个函数
csdn 博客中实现运行代码功能实现

Javascript 中的 JavaScript 获取事件对象的注意点


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 205 ::
收藏到网摘: n/a

平时我们获取事件对象一定要将firefox考虑进去。

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

复制代码 代码如下:

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>