Home > Web Front-end > JS Tutorial > body text

Firefox event processing automatically finds the event function (for onclick=foo())_javascript skills

WBOY
Release: 2016-05-16 18:21:55
Original
1853 people have browsed it

IE and firefox event processing
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 In this case, if it happens on-site and is used on-site, ff will automatically pass 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:




<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, it displays "undefined", under ff, it displays "[object]" <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:


<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:


Method 2: Automatic Find
Copy code The code is as follows:


<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.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!