IE and Firefox event handling
In IE, event objects are saved and maintained as a global variable. All browser events, whether triggered by the user
, or other events, updates the Window.event object. So in code, just easy to call window.event
You can easily get the event object and then event.srcelement the element that triggers the event to further process
In FF, the event object is not a global object, in general, is the scene, the site used, FF automatically transmitted event objects
Recursion to the corresponding event handler function. In code, the first parameter of a function is the event object under FF.
The above is my personal understanding of the event handling methods under two browsers, may not be very clear, I write some code to
Explain in detail
Copy Code code 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 global objects
Alert (window.event)//IE, display "[Object]", FF shows "undefined"
FF, the first parameter is automatically from the event object
Alert (Arguments[0])//IE, display "undefined", FF display "[Object]"
}
function Foo2 (e) {
Alert (window.event)//IE, display "[Object]", FF shows "undefined"
Note that I have never passed parameters to Foo2. Now the FF automatic pass parameter to Foo2, the pass parameter E is the event object
Alert (e)//IE, display "undefined", FF shows "[Object]"
}
function Foo3 () {//simultaneous compatibility of IE and FF, fetching event objects
Alert (Arguments[0] | | window.event)//IE and FF, all display "[Object]"
var Evt=arguments[0] | | Window.event
var Element=evt.srcelement | | Evt.target//Get Btn3 object under IE and FF
Alert (element.id)//Btn3
}
</script>
Seeing here, we seem to have understood the event handling of IE and FF, and found a solution.
But.... It's not over yet.
Look at the code
Copy Code code as follows:
<button id= "btn" onclick= "foo ()" > button 1</button>
<script>
function foo () {
Alert (Arguments[0] | | | window.event)
}
</script>
Unfortunately, the result we foo gave us was undefined, not the desired object.
The reason for this is how the event is bound
Onclick= "foo ()" is executed directly, the Foo () function, without any arguments,
In this case Firefox has no chance to pass any arguments to Foo
And Btn.onclick=foo this case, because instead of directly executing the function, Firefox has the opportunity to pass parameters to Foo
Workaround:
Method One: The more stupid method, since Firefox does not have the opportunity to pass the parameter, then oneself diligent point, oneself passes
Copy Code code 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.target
Alert (element.id)
}
</script>
Method Two: Automatically find
Copy Code code as follows:
<button id= "Btn4" onclick= "Foo4 ()" > button 4</button>
<script>
function Foo4 () {
var evt=getevent ()
var Element=evt.srcelement | | Evt.target
Alert (element.id)
}
function GetEvent () {//simultaneous compatibility of 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 II by Lostinet original, I have improved on its basis, the original function is as follows
Copy Code code 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:
All two of these solutions correctly handle event handling under FF and IE (whether onclick= "foo ()", or Onclick=foo way)
However, it is recommended that the GetEvent () method be used to unify the handling of event problems.
