Home >
Web Front-end >
JS Tutorial >
Firefox event processing automatically finds the event function (for onclick=foo())_javascript skills
Firefox event processing automatically finds the event function (for onclick=foo())_javascript skills
WBOY
Release: 2016-05-16 18:21:55
Original
1880 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
<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
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
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.
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