Details of firefox and ie event processing, research, and write simultaneously compatible with ie and ff event processing code

In ie, event objects are saved and maintained as global variables. All browser events, whether triggered by the user or other events, will update the window. event object. Therefore, in the code, you only need to easily call window. event, you can easily obtain the event object, and then event. srcElement can be used to obtain the element that triggers the event for further processing in ff, but the event object is not a global object. Generally, it occurs on site and is used on site, ff automatically passes the event object to the corresponding event handler. In the code, the first parameter of the function is the event object under ff.
The above is my personal understanding of the event handling methods in the two browsers. I may not quite understand it. I will write some code
Details
Copy codeThe Code is as follows:
<Button id = "btn1"> button 1 </button>
<Button id = "btn2"> button 2 </button>
<Button id = "btn3"> button 3 </button>
<Script>
Window. onload = function (){
Document. getElementById ("btn1"). onclick = foo1
Document. getElementById ("btn2"). onclick = foo2
Document. getElementById ("btn3"). onclick = foo3
}
Function foo1 (){
// In ie, window. event makes the Global Object
Alert (window. event) // under ie, "[object]" is displayed, and "undefined" is displayed under ff"
// In ff, the first parameter is automatically used as the event object
Alert (arguments [0]) // under ie, "undefined" is displayed, and "[object]" is displayed under ff.
}
Function foo2 (e ){
Alert (window. event) // under ie, "[object]" is displayed, and "undefined" is displayed under ff"
// Note that I have never passed a parameter to foo2. Now ff automatically transmits the parameter to foo2, And the passed parameter e is the event object.
Under alert (e) // ie, "undefined", ff "[object]" is displayed.
}
Function foo3 () {// compatible with both the writing of ie and ff, take the event object
Alert (arguments [0] | window. event) // under ie and ff, "[object]" is displayed.
Var evt = arguments [0] | window. event
Var element = evt. srcElement | evt.tar get // get the btn3 object in ie and ff
Alert (element. id) // btn3
}
</Script>

Here, we seem to have understood the handling methods of both ie and ff events and found a solution.
But .... The event is not over yet.
View code
Copy codeThe Code is as follows:
<Button id = "btn" onclick = "foo ()"> button 1 </button>
<Script>
Function foo (){
Alert (arguments [0] | window. event)
}
</Script>

Unfortunately, the result given by foo is undefined, not the expected object.
The reason is the event binding method.
Onclick = "foo ()" means to directly execute the foo () function without any parameters,
In this case, firefox has no chance to pass any parameters to foo.
In the case of btn. onclick = foo, firefox has the opportunity to pass parameters to foo because it does not directly execute the function.
Solution:
Method 1: This is a stupid method. Since firefox does not have the opportunity to pass parameters, it is easy to pass parameters by yourself.
Copy codeThe Code is as follows:
<Button id = "btn" onclick = "foo (event)"> button </button>
<Script>
Function foo (){
Alert (arguments [0] | window. event)
Var evt = arguments [0] | window. event
Var element = evt. srcElement | evt.tar get
Alert (element. id)
}
</Script>

Method 2: automatic search
Copy codeThe Code is as follows:
<Button id = "btn4" onclick = "foo4 ()"> button 4 </button>
<Script>
Function foo4 (){
Var evt = getEvent ()
Var element = evt. srcElement | evt.tar get
Alert (element. id)
}
Function getEvent () {// compatible with both ie and ff
If (document. all) return window. event;
Func = getEvent. caller;
While (func! = Null ){
Var arg0 = func. arguments [0];
If (arg0 ){
If (arg0.constructor = Event | arg0.constructor = MouseEvent)
| (Typeof (arg0) = "object" & arg0.preventDefault & arg0.stopPropagation )){
Return arg0;
}
}
Func = func. caller;
}
Return null;
}
</Script>

Method 2 is original by lostinet. I have improved it based on it. The original function is as follows:
Copy codeThe Code 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;
}

Summary:
In both of the preceding solutions, the event handling in ff and ie is handled correctly (whether onclick = "foo ()" or onclick = foo)
However, it is recommended that you use the getEvent () method to handle event issues in a unified manner.
Write it here first. Continue ..