Allow Firefox to support event object implementation code

Generally, to be compatible with IE and FireFox, the general event processing method is as follows:
Copy codeThe Code is as follows:
Btn. onclick = handle_btn_click;
Function handle_btn_click (evt ){
If (evt = null) evt = window. event; // IE
// Process the event.
}

This is not a hassle for simple programs.
However, for some complex programs, a write function is not directly linked to the event. if you want to pass the event to this parameter, all methods must pass the event .. this is a nightmare.
The following describes how to solve this problem and how it works.
In JScript, a function call has the func. caller attribute.
For example
Copy codeThe Code is as follows:
Function ()
{
B ();
}
Function B ()
{
Alert (B. caller );
}

If B is called by A, B. caller is
In addition, the function has an arguments attribute, which can traverse the parameters currently executed by the function:
Copy codeThe Code is as follows:
Function myalert ()
{
Var arr = [];
For (var I = 0; I <myalert. arguments. length; I ++)
Arr [I] = myalert. arguments [I];
Alert (arr. join ("-"));
}
Myalert ("hello", "world", 1, 2, 3)

Hello-world-1-2-3
(The number of arguments is related to the caller, but not to the parameter definition of the function)
Based on these two attributes, we can get the event object of the first function:
Copy codeThe 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 an event object
Return arg0;
}
Func = func. caller;
}
Return null;
}

In this example, SearchEvent is used to search for event objects. 'event' is the FireFox Event. constructor.
In this example,
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 no parameters are defined, the first parameter is event when called. Therefore, handle_click.arguments [0] is event!
Based on the above knowledge, we can combine prototype. _ defineGetter _ to implement window. event in FireFox:
The following is a simple code .. if you are interested, you can add it (I have modified it)
Copy codeThe Code is as follows:
<Script language = "javascript">
Function handle_click (){
If (window. addEventListener)
{
FixPrototypeForGecko ();
Alert (window. event. srcElement)
}
}
Function FixPrototypeForGecko ()
{
HTMLElement. prototype. _ defineGetter _ ("runtimeStyle", element_prototype_get_runtimeStyle );
Window. constructor. prototype. _ defineGetter _ ("event", window_prototype_get_event );
Event. prototype. _ defineGetter _ ("srcElement", event_prototype_get_srcElement );
}
Function element_prototype_get_runtimeStyle ()
{
// Return style instead...
Return this. style;
}
Function window_prototype_get_event ()
{
Return SearchEvent ();
}
Function event_prototype_get_srcElement ()
{
Return this.tar get;
}
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)
If (arg0.constructor = Event | arg0.constructor = MouseEvent | (typeof (arg0) = "object" & arg0.preventDefault & arg0.stopPropagation ))
Return arg0;
}
Func = func. caller;
}
Return null;
}
</Script>
<Div id = "mydiv" onclick = "handle_click ();"> click here !! </Div>

Javascript and JScript are also different. The former is the client script, and the latter is the server script, which is also supported by the server like VBScript.
Of course, I am not going to talk about the difference between the two, but to let myself know my current level (not a general difference )...
If only the above Code is provided, I believe that it will be hard to understand the usefulness of the code at the beginning.
Here I will explain the usage of the above Code one by one.
Let's take a look at the explanations of the two methods _ defineGetter _ and _ defineSetter:
1. Getter is a method to get the value of an attribute. Setter is a method to set the value of an attribute. You can set the getter and setter methods for any predefined core object or custom object to add new attributes to the existing object.
2. When can I add new attributes to objects and events?
1. defined during object initialization
2. After the Object is defined, append the definition through the _ defineGetter _ and _ defineSetter _ methods of the Object.
Detailed usage can be viewed here on _ defineGetter _, _ defineSetter _ explanation (Address: http://anbutu.javaeye.com/blog/post/194276)
So we can see that the FixPrototypeForGecko () function adds attributes to the three objects respectively. Of course, the object is added under FF:
The "runtimeStyle" attribute is added to HTMLElement. The attribute value is the value returned by the element_prototype_get_runtimeStyle function.
The "event" attribute is added to window. The property value is the value returned by window_prototype_get_event.
The "srcElement" attribute is added to the Event. The base attribute value is the value returned by the event_prototype_get_srcElement function.
In this way, new attributes are extended for the three objects under FF.
Therefore, after determining whether the browser is FF, execute the FixPrototypeForGecko () process. At this time, the three objects in FF have new attributes.
So when we click the DIV tag, we can see the "[object HTMLDivElement]" in the pop-up window. This also means that we have successfully added the event attribute to the window object.
Copy codeThe Code is as follows:
If (window. addEventListener ){
FixPrototypeForGecko ();
Alert (window. event. srcElement)
}

You can see the element_prototype_get_runtimeStyle process and event_prototype_get_srcElement process. Therefore, the returned values are easy to understand.
Let's take a look at how the window_prototype_get_event () process returns events.
The returned value of the process is the result of the SearchEvent () process.
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 | 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 the two methods: caller and arguments (there are corresponding explanations in the article)
Here, I will explain the constructor property, and return the creator of the corresponding object of the object.
In the while LOOP, we can see the return of func. caller. The last return is our mouse click event.
Because the handle_click () process is executed after we click div, the final func. caller is our click event. At this time, funcj is handle_click (), which is equivalent to handle_click.caller. Of course, the caller of handle_click is The onclick event, that is, [MouseEvent].
We can see that I added a condition in if (arg0.constructor = Event | arg0.constructor = MouseEvent) because the current result of arg0.constructor is MouseEvent.
I believe everyone knows how to compile the event under FF.
Finally, let's talk about the "addEventListener" Method for registering an event as an object.
Copy codeThe Code is as follows:
<Script>
Function addObjectEvent (objId, eventName, eventFunc)
{
Var targetObj = document. getElementById (objId );
If (targetObj)
{
If (targetObj. attachEvent)
{
TargetObj. attachEvent (eventName, eventFunc );
}
Else if (targetObj. addEventListener)
{
EventName = eventName. toString (). replace (/on (. *)/I, '$1 ');
TargetObj. addEventListener (eventName, eventFunc, true );
}
}
}
Function test1 ()
{
Alert ('test1 ');
}
Function test2 ()
{
Alert ('test2 ');
}
</Script>
<Div id = "hi" onclick = "MyTest ();"> on click </div>
<Script>
AddObjectEvent ('hi', 'onclick', test1 );
AddObjectEvent ('hi', 'onclick', test2); // run test2 (Queue) first)
</Script>