firefox事件处理之自动查找event的函数（用于onclick="foo()"）

http://hi.baidu.com/top147/blog/item/052d550922ef89ad2fddd4fa.html

IE与firefox事件处理

2007-06-27 13:26

在ie中，事件对象是作为一个全局变量来保存和维护的。 所有的浏览器事件,不管是用户触发 的，还是其他事件， 都会更新window.event 对象。 所以在代码中，只要轻松调用 window.event 就可以轻松获取 事件对象， 再 event.srcElement 就可以取得触发事件的元素进行进一步处理 在ff中， 事件对象却不是全局对象，一般情况下，是现场发生，现场使用，ff把事件对象自动传 递给对应的事件处理函数。        在代码中，函数的第一个参数就是ff下的事件对象了。      以上是我个人对两个浏览器下的事件处理方法的粗浅理解，可能说得不是很明白，我写些代码来      详细说明一下        1 < button id = " btn1 " > 按钮1 </ button > 2 < button id = " btn2 " > 按钮2 </ button > 3 < button id = " btn3 " > 按钮3 </ button > 4 5 < script > 6 7 window.onload = function (){ 8      document.getElementById( " btn1 " ).onclick = foo1 9      document.getElementById( " btn2 " ).onclick = foo2 10      document.getElementById( " btn3 " ).onclick = foo3 11 } 12 13 function foo1(){ 14       // ie中， window.event使全局对象 15      alert(window.event)    // ie下，显示 "[object]" ,   ff下显示 "undefined" 16      17      // ff中，   第一个参数自动从为 事件对象 18      alert(arguments[ 0 ])    // ie下，显示   "undefined",   ff下显示 "[object]" 19 } 20 21 function foo2(e){ 22      alert(window.event)   // ie下，显示 "[object]" ,   ff下显示 "undefined" 23      24      // 注意，我从来没有给   foo2传过参数哦。   现在 ff自动传参数给 foo2, 传的参数e 就是事件对象了 25      alert(e)                // ie下，显示   "undefined",   ff下显示 "[object]" 26 } 27 28 function foo3(){     // 同时兼容ie和ff的写法,取事件对象 29      alert(arguments[ 0 ] || window.event)   // ie 和 ff下，都显示 "[object]" 30      var evt = arguments[ 0 ] || window.event 31      var element = evt.srcElement || evt.target   // 在 ie和ff下   取得 btn3对象 32      alert(element.id)            //      btn3 33 } 34 </ script > 35 看到这里，我们似乎对 ie和ff的事件处理方式都已经理解了，并找到了解决的办法。 但是。。。。事情还没有结束。 看代码 < button id = " btn " onclick = " foo() " > 按钮1 </ button > < script > function foo(){         alert(arguments[ 0 ] || window.event) } </ script > 很不幸，我们 foo给我们的结果是   undefined, 而不是期望的 object 原因在于 事件绑定的方式       onclick="foo()"    就是直接执行了， foo() 函数,没有任何参数的，       这种情况下 firefox没有机会传递任何参数给foo     而 btn.onclick=foo    这种情况， 因为不是直接执行函数，firefox才有机会传参数给foo   解决方法：       方法一：比较笨的方法，既然 firefox没有机会传参数，那么自己勤快点，自己传     < button id = " btn " onclick = " foo(event) " > 按钮 </ button > < script > function foo(){        alert(arguments[ 0 ] || window.event)             var evt = arguments[ 0 ] || window.event     var element = evt.srcElement || evt.target       alert(element.id)    } </ script >         方法二： 自动查找 1 < button id = " btn4 " onclick = " foo4() " > 按钮4 </ button > 2 3 < script > 4 5 function foo4(){    6      var evt = getEvent() 7      var element = evt.srcElement || evt.target   8      alert(element.id)          9 } 10 11 function getEvent(){      // 同时兼容ie和ff的写法 12          if (document.all)     return window.event;         13          func = getEvent.caller;             14          while (func != null ){     15              var arg0 = func.arguments[ 0 ]; 16              if (arg0){ 17                  if ((arg0.constructor == Event || arg0.constructor == MouseEvent) 18                      || ( typeof (arg0) == " object " && arg0.preventDefault && arg0.stopPropagation)){     19                      return arg0; 20                  } 21              } 22              func = func.caller; 23          } 24          return null ; 25 } 26 </ script > 27 方法二由   lostinet原创，我在其基础上有所改进，   原函数如下   1 function SearchEvent() 2 { 3    //IE 4    if(document.all) 5        return window.event; 6         7     func=SearchEvent.caller; 8    while(func!=null) 9    { 10        var arg0=func.arguments[0]; 11        if(arg0) 12        { 13            if(arg0.constructor==Event) 14                return arg0; 15         } 16         func=func.caller; 17     } 18    return null; 19} 简单总结：      以上两个解决方法中，都正确处理   ff和ie下    的事件处理 （不管是onclick="foo()",方式还是   onclick=foo方式） 但是个人建议用   getEvent() 方法来统一处理 事件问题。