Details of firefox and ie event processing, research, and further research. Writing event processing code that is compatible with both ie and ff_javascript skills

In IE, the event object is saved and maintained as a global variable. All browser events, whether triggered by the user or other events, will update the window.event object. So in the code, you can easily get the event object by simply calling window.event, and then use event.srcElement to get the element that triggered the event for further processing. In ff, the event object is not a global object. Generally, it happens on-site. , used on site, ff automatically passes the event object to the corresponding event processing function. In the code, the first parameter of the function is the event object under ff.
The above is my personal understanding of the event processing methods under the two browsers. It may not be very clear. I wrote some code to
explain it in detail

Copy code The code is as follows:

Button 1
Button2
Button3
<script> <br>window.onload=function(){ <br>document.getElementById("btn1").onclick=foo1 <br>document.getElementById("btn2").onclick=foo2 <br>document.getElementById("btn3").onclick=foo3 <br>} <br>function foo1(){ <br>//In ie, window.event makes the global object <br>alert(window.event) // Under ie, "[object]" is displayed, and under ff, "undefined" is displayed <br> //In ff, the first parameter automatically changes from the event object <br>alert(arguments[0]) // Under ie, it displays "undefined", under ff, it displays "[object]" <br>} <br>function foo2(e){ <br>alert(window.event) // Under ie, "[object]" is displayed, and under ff, "undefined" is displayed <br>//Note, I have never passed parameters to foo2. Now ff automatically passes parameters to foo2, and the passed parameter e is the event object <br>alert(e) // Under ie, "undefined" is displayed, and under ff, "[object]" is displayed <br>} <br>function foo3 (){ //Compatible with both ie and ff writing methods, take the event object <br>alert(arguments[0] || window.event) // Under both ie and ff, "[object]" is displayed <br>var evt =arguments[0] || window.event <br>var element=evt.srcElement || evt.target //Get btn3 object under ie and ff <br>alert(element.id) // btn3 <br>} <br></script>

Seeing this, we seem to have understood the event handling methods of ie and ff, and have found a solution.
But. . . . It's not over yet.
Look at the code

Copy the code The code is as follows:

Button 1
<script> <br>function foo(){ <br>alert(arguments[0] || window.event) <br>} <br></script>

Unfortunately, the result foo gives us is undefined, not the expected object
The reason is the way the event is bound
onclick=" foo()" is executed directly. The foo() function does not have any parameters.
In this case, firefox has no chance to pass any parameters to foo
In this case, btn.onclick=foo, because it is not directly Only after executing the function does firefox have the opportunity to pass parameters to foo
Solution:
Method 1: A stupid method. Since firefox has no chance to pass parameters, be diligent and pass them yourself

Copy code The code is as follows:

Button< ;/button>
<script> <br>function foo(){ <br>alert(arguments[0] || window.event) <br>var evt=arguments[0] || window.event <br>var element=evt.srcElement || evt.target <br>alert(element.id) <br>} <br></script>

Method 2: Automatic search

Copy code The code is as follows:

Button 4
<script> <br>function foo4(){ <br>var evt=getEvent() <br>var element=evt.srcElement || evt.target <br> alert(element.id) <br>} <br>function getEvent(){ //compatible with both ie and ff writing <br>if(document.all) return window.event; <br>func=getEvent.caller; <br>while(func!=null){ <br>var arg0=func.arguments[0]; <br>if(arg0){ <br>if((arg0.constructor==Event || arg0.constructor = =MouseEvent) <br>|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){ <br>return arg0; <br>} <br>} <br>func=func. caller; <br>} <br>return null; <br>} <br></script>

Method 2 was originally created by lostinet, and I have improved on it. The original function is as follows:

function SearchEvent() { //IE if(document.all) return window.event; func=SearchEvent.caller;

while(func!=null)

{
var arg0=func.arguments[0];
if(arg0)
{
if(arg0.constructor==Event)
return arg0;
}
func=func.caller;
}
return null;
}


Simple summary:
Both of the above In the solution, event processing under ff and ie is correctly handled (whether it is onclick="foo()" or onclick=foo)
But I personally recommend using the getEvent() method to handle event issues uniformly.
That’s it for now, let’s continue. .