Javascript browser compatibility tutorial-Event Processing

1. window. event

[Analysis description] First read a piece of code.

Copy codeThe Code is as follows:
Function et ()
{
Alert (event); // IE: [object]
}

The above code runs in IE and the result is [object], but cannot run in Firefox.

In IE, the event can be directly used as an attribute of the window object, but the W3C model is used in Firefox. It transmits events by passing parameters, that is to say, You need to provide an Event Response interface for your function.

[Compatible processing] adds an event judgment to get the correct event based on the browser:

Copy codeThe Code is as follows:
Function et ()
{
Evt = evt? Evt :( window. event? Window. event: null );
// Compatible with IE and Firefox
Alert (evt );
}

2. Obtain the keyboard Value

[Analysis description] IE and Firefox use different methods to obtain the keyboard value. You can understand that the event. which in Firefox is equivalent to the event. keyCode in IE. For details about the differences, refer to the keyCode, which, and charCode compatibility test in Keyboard Events.

[Compatible processing]
Copy code

Copy codeThe Code is as follows:
Function myKeyPress (evt ){
// Compatible with IE and Firefox to obtain keyBoardEvent objects
Evt = (evt )? Evt: (window. event )? Window. event :"")
// Compatible with IE and Firefox to obtain the key value of the keyBoardEvent object
Var key = evt. keyCode? Evt. keyCode: evt. which;
If (evt. ctrlKey & (key = 13 | key = 10 )){
// Press Ctrl and enter at the same time
// Do something;
}
}

3. Event source acquisition

[Analysis description] when using event delegation, you can obtain the event source to determine which element the event comes from. However, in IE, the event object has the srcElement attribute, but does not have the target attribute; in Firefox, the even object has the target attribute, but does not have the srcElement attribute.

[Compatible processing]

Copy codeThe Code is as follows:
Ele = function (evt) {// capture the object to which the current event acts
Evt = evt | window. event;
Return
(Obj = event. srcElement? Event. srcElement: event.tar get ;);
}

4. event listening

[Analysis description] In terms of event listening processing, IE provides attachEvent and detachEvent interfaces, while Firefox provides addEventListener and removeEventListener.

[Compatible processing] The simplest compatibility processing is to encapsulate these two sets of interfaces:

Copy codeThe Code is as follows:
Function addEvent (elem, eventName, handler ){
If (elem. attachEvent ){
Elem. attachEvent ("on" + eventName, function (){
Handler. call (elem )});
// Use the callback function call () to point this to elem.
} Else if (elem. addEventListener ){
Elem. addEventListener (eventName, handler, false );
}
}
Function removeEvent (elem, eventName, handler ){
If (elem. detachEvent ){
Elem. detachEvent ("on" + eventName, function (){
Handler. call (elem )});
// Use the callback function call () to point this to elem.
} Else if (elem. removeEventListener ){
Elem. removeEventListener (eventName, handler, false );
}
}

Note that in Firefox, this in the event processing function points to the listened element itself. In IE, this is not the case. You can use the callback function call to point the current context to the listened element.

5. Mouse position

[Analysis description] in IE, the even object has the x and y attributes, but does not have the pageX and pageY attributes. In Firefox, the even object has the pageX and pageY attributes, but does not have the x and y attributes.

[Compatible processing] Use mX (mX = event. x? Event. x: event. pageX;) to replace event. x in IE or event. pageX in Firefox. The absolute location must be considered for the complexity.

Copy codeThe Code is as follows:
Function getAbsPoint (e ){
Var x = e. offsetLeft, y = e. offsetTop;
While (e = e. offsetParent ){
X + = e. offsetLeft;
Y + = e. offsetTop;
}
Alert ("x:" + x + "," + "y:" + y );
}