Let Firefox support event object implementation code_javascript skills-JS Tutorial-php.cn

Usually in order to be compatible with IE and FireFox, the general event processing method is:

Copy code The code is as follows:

 
btn.onclick=handle_btn_click; 
function handle_btn_click(evt){ 
if(evt==null)evt=window.event;//IE 
//Handle events. 
} 

For simple programs, this is not troublesome.
But for some complex programs, a certain function is not directly linked to the event at all. If you want to pass event into this parameter, then all This is simply a nightmare.
The following is a method and principle to solve this trouble.
In JScript, the function call has the attribute func.caller .
For example

Copy code The code is as follows:

 
function A() 
{ 
B(); 
} 
function B() 
{ 
alert(B.caller); 
} 

If B is A calls, then B.caller is A
In addition, the function has an arguments attribute. This attribute can traverse the parameters of the current execution of the function:

Copy code The code is as follows:

 
function myalert() 
{ 
var arr=[]; 
for(var i=0;iarr[i]=myalert.arguments[i]; 
alert(arr.join("-")); 
} 
myalert("hello","world ",1,2,3) 

will display hello-world-1-2-3
(the number of arguments is related to the caller, and has nothing to do with the parameter definition of the function. Relationship)
According to these two attributes, we can get the event object of the first function:

Copy code The code is as follows :

 
btn.onclick=handle_click; 
function handle_click() 
{ 
showcontent(); 
} 
function showcontent() 
{ 
var evt=SearchEvent(); 
if(evt&&evt.shiftKey)//If it is an event-based call and shift is pressed 
window.open(global_helpurl); 
else 
location .href=global_helpurl; 
} 
function SearchEvent() 
{ 
func=SearchEvent.caller; 
while(func!=null) 
{ 
var arg0=func .arguments[0]; 
if(arg0) 
{ 
if(arg0.constructor==Event) // If it is the event object 
return arg0; 
} 
func= func.caller; 
} 
return null; 
} 

This example uses SearchEvent to search for event objects. Where 'Event' is FireFox's event.constructor.
When this example is run,
SearchEvent.caller is showcontent, but showcontent.arguments[0] is empty. So when func=func.caller, func becomes handle_click.
handle_click is called by FireFox, although it is not defined parameters, but when called, the first parameter is event, so handle_click.arguments[0] is event!
Based on the above knowledge, we can combine prototype.__defineGetter__ to implement window.event under FireFox:
A simple code is given below. If you are interested, you can add it (I have already modified it)

Copy the code The code is as follows :

click here!!

Javascript and JScript are also different. The former is a client-side script, while the latter is a server-side script and is supported by the server like VBScript.
Of course, I am not here to talk about the difference between the two, but just to let myself know. My current level (not average)...
If I only give the above code, I believe that friends who are just starting to work on compatibility will find it difficult to understand the use of these codes
Here I will explain it Let’s first explain the usage of the above codes
Let’s first look at the explanations of the two methods __defineGetter__ and __defineSetter__:
1. Getter is a method of getting the value of an attribute, and Setter is A method of setting the value of a property. You can define getter and setter methods for any predefined core object or user-defined object, thereby adding new properties to existing objects.
2. When can new attributes be added to objects and events?
1. Define when the object is initialized
2. After the object is defined, add definitions through the __defineGetter__ and __defineSetter__ methods of Object
For detailed usage, please see the explanation of __defineGetter__ and __defineSetter__ here (Address: http://anbutu.javaeye.com/blog/post/194276)
So we saw that in the FixPrototypeForGecko() function Attributes are added to three objects respectively, of course, the objects are added under FF:
HTMLElement adds the "runtimeStyle" attribute, and the attribute value is the value returned by the element_prototype_get_runtimeStyle function
window adds the "event" attribute , the attribute value is the value returned by window_prototype_get_event
Event adds the "srcElement" attribute, and the base attribute value is the value returned by the event_prototype_get_srcElement function
In this way, we have expanded new attributes for these three objects under FF
So we execute the FixPrototypeForGecko() process after judging whether the browser is FF. At this time, these three objects have new attributes under FF
So when we click on the DIV tag, we see in the pop-up window When we reach the words "[object HTMLDivElement]", it also means that we have successfully added the event attribute to the window object

Copy the code The code is as follows :

 
if(window.addEventListener) { 
FixPrototypeForGecko(); 
alert(window.event.srcElement) 
} 

You can Seeing the element_prototype_get_runtimeStyle process and the event_prototype_get_srcElement process, the returned values can be easily understood
Let’s take a look at how the window_prototype_get_event() process returns events
The return value of the process is the result of the SearchEvent() process. Take a look at this process

Copy the code The 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||arg0.constructor==MouseEvent) 
if(arg0.constructor ==Event||arg0.constructor==MouseEvent || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) 
return arg0; 
} 
func=func. caller; 
} 
return null; 
} 

To understand this process, you must first understand two methods: caller and arguments (there are corresponding explanations in the article)
Here we will explain the constructor attribute again. What is returned is the creator of the corresponding object of the object
In the while loop, alert(func) we can see the return of func.caller, the last return This is our mouse click event
Because the handle_click() process is executed after we click on the div, so the final func.caller is our click event. At this time, funcj is handle_click(), so it is quite So handle_click.caller, of course the caller of handle_click is of course the onclick event, which is [MouseEvent]
You can see that I added a condition in if(arg0.constructor==Event||arg0.constructor==MouseEvent) , because the current result of arg0.constructor is MouseEvent
After seeing this, I believe everyone knows how to write events in FF
Finally, let’s talk about "addEventListener" to register the event method for the object

Copy code The code is as follows:

<script> <br>function addObjectEvent(objId,eventName,eventFunc) <br>{ <br>var targetObj = document.getElementById(objId); <br>if(targetObj) <br>{ <br>if(targetObj.attachEvent) <br>{ <br>targetObj.attachEvent(eventName,eventFunc); <br>} <br>else if(targetObj.addEventListener) <br>{ <br>eventName = eventName.toString().replace(/on(.*)/i,'$1'); <br>targetObj.addEventListener(eventName,eventFunc,true); <br>} <br>} <br>} <br>function test1() <br>{ <br>alert('test1'); <br>} <br>function test2() <br>{ <br>alert('test2'); <br>} <br></script> 
on click

<script> <br>addObjectEvent('hi','onclick',test1); <br>addObjectEvent('hi','onclick',test2);//先执行test2(队列) <br></script> 