Usually for compatibility with IE and Firefox, the general event handling method is:
Copy Code code as follows:
Btn.onclick=handle_btn_click;
function Handle_btn_click (evt) {
if (evt==null) evt=window.event;//ie
Handle the event.
}
For simple programs, this is not a hassle.
But for some complex programs, a write function is not directly linked to the event. If you want to pass the event to this parameter, then all the methods have to pass the event. This is a nightmare.
Here's a way to solve this problem, and the principle.
In JScript, the invocation of a function has a func.caller this property.
For example
Copy Code code as follows:
function A ()
{
B ();
}
function B ()
{
alert (B.caller);
}
If B is called by A, then B.caller is a
In addition, the function has a arguments property. This property can traverse the parameters currently executing by the function:
Copy Code code 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)
You can show 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 properties, we can get the event object for the first function:
Copy Code code as follows:
Btn.onclick=handle_click;
function Handle_click ()
{
Showcontent ();
}
function Showcontent ()
{
var evt=searchevent ();
if (Evt&&evt.shiftkey)//If the call is based on an event, 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 is the event object
return arg0;
}
Func=func.caller;
}
return null;
}
This example uses Searchevent to search for an event object. Where ' Event ' is the event.constructor of FireFox.
When the example is run, the
Searchevent.caller is showcontent, but showcontent.arguments[0] is empty. So Func=func.caller, Func becomes Handle_click.
Handle_click is called by FireFox, although no parameters are defined, but when invoked, the first argument is event, so Handle_click.arguments[0] is an event!
For the above knowledge, we can combine prototype.__definegetter__ to realize the implementation of window.event under FireFox:
Here's a simple code. Interested can be added (I have already modified)
Copy Code code 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.target;
}
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 client script, the latter is server-side script and VBScript is supported by the server
Of course I am not here to say the difference between the two, just let oneself understand the level of their current (not the general poor) ...
If you just give the code above, it's hard to understand the usefulness of this code when you're starting out with compatibility.
Here, I'll explain the use of these codes in one by one.
Let's take a look at the explanations of the __definegetter__ and __definesetter__ two ways:
A. Getter is a way to get the value of a property, a setter is a way to set the value of a property. You can set the getter and setter methods for any predefined core object or user-defined object to add new properties to an existing object.
Two. When can you add new properties to objects and events?
1. Defining when object initialization
2. Append definition to object after definition by __definegetter__, __definesetter__ method
Detailed usage can be seen here for the explanation of __definegetter__, __definesetter__ (address: http://anbutu.javaeye.com/blog/post/194276)
So we saw that in the Fixprototypeforgecko () function We added attributes to three objects, of course, to add to the object under FF:
HtmlElement added the "Runtimestyle" property, the value of the property is the value returned by the Element_prototype_get_runtimestyle function
Window added "Event" property with value of Window_prototype_get_event returned
Event adds a "Srcelement" property with the value of the base property being the value returned by the Event_prototype_get_srcelement function
So we're extending the new properties for these three objects under FF.
So we have to determine if the browser is FF after the Fixprototypeforgecko () process, this time under the FF three objects have a new attribute
So when we clicked on the div tag, we saw the words "[object Htmldivelement]" in the pop-up window, and we've successfully added the event attribute to the Windows object.
Copy Code code as follows:
if (Window.addeventlistener) {
Fixprototypeforgecko ();
Alert (window.event.srcElement)
}
You can see the element_prototype_get_runtimestyle process and the event_prototype_get_srcelement process so the values returned are easy to understand.
So let's look at how the Window_prototype_get_event () process returns the event
The return value of the procedure is the result of the searchevent () process, look at this process
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| | 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 have to understand two methods: caller and arguments (explained in the article)
Here's a second explanation for the constructor constructor, which returns the creator of the object's corresponding object.
In the While loop, alert (func) we can see the return of Func.caller, and the last time we return is our mouse click event.
Because the Handle_click () process is we click on the div after the execution, so the last Func.caller is our Click event, this time FUNCJ is Handle_click (), then it is the equivalent of Handle_ Click.caller, of course, Handle_click's caller is the onclick event, which is [MouseEvent]
Can see me in if (arg0.constructor==event| | Arg0.constructor==mouseevent) added a condition because arg0.constructor now the result is MouseEvent
See here I believe you know how to write an event under FF
Finally, "AddEventListener" is the object registration event method
Copy Code code as follows:
<script>
function addobjectevent (objid,eventname,eventfunc) br>{
var targetobj = document.getElementById (ObjID);
if (targetobj)
{
if (targetobj.attachevent)
{
Targetobj.attachevent (eventname,eventfunc);
}
Else if (Targetobj.addeventlistener)
{
EventName = eventname.tostring (). Replace (/on (. *)/I, ' $ ');
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);//execute test2 (queue)
</script>
First
