JavaScript 获取事件对象的一个注意点【问题】

JavaScript 获取事件对象的一个注意点

2009-7-24 上午 - JS/Ajax/AS/Flex - event - javascript   

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

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>