JavaScript browser Compatibility Tutorial Event Handling _ Basics

1. window.event

"Analysis Notes" read a piece of code first

Copy Code code as follows:

Function ET ()
{
alert (event);//ie: [Object]
}

The above code in IE run the result is [object], and in Firefox can not run.

Because the event as a Window object in IE can be used directly, but in Firefox, the model of the consortium is used, which propagates events by means of parameters, that is, you need to provide an interface of event response for your function.

"Compatibility Handling" adds to the event judgment, depending on the browser to get the correct event:

Copy Code code as follows:

Function ET ()
{
EVT=EVT?EVT: (Window.event?window.event:null);
Compatible with IE and Firefox
alert (EVT);
}

2. Access to keyboard values

"Analysis of" IE and Firefox access to keyboard values of different methods, can be understood, Firefox under the Event.which and IE under the event.keycode equivalent. For different purposes, refer to the compatibility test for KeyCode, which, and charcode in keyboard events

"Compatibility Handling"
Copy Code

Copy Code code as follows:

function Mykeypress (evt) {
Compatible with IE and Firefox to get KeyboardEvent objects
EVT = (evt)? EVT: ((window.event)? Window.event: "")
Compatible with IE and Firefox to get the key value of the KeyboardEvent object
var key = Evt.keycode?evt.keycode:evt.which;
if (Evt.ctrlkey && (key = = | key = = 10)) {
CTRL and enter key pressed at the same time
Do something;
}
}

3. Access to Event sources

"Analysis Instructions" in the use of event delegates, through the event source to determine the event from which elements, but, in IE, the event object has srcelement properties, but there is no target attribute; Firefox, the even object has the target attribute, However, there is no srcelement attribute.

"Compatibility Handling"

Copy Code code as follows:

Ele=function (EVT) {//Capture the object that the current event acts on
evt=evt| | window.event;
Return
(Obj=event.srcelement?event.srcelement:event.target;);
}

4. Event Monitoring

"Analysis Notes" in the event listener processing, IE provides attachevent and detachevent two interfaces, while Firefox provides AddEventListener and RemoveEventListener.

The simplest compatibility process for "compatibility handling" is to encapsulate these two sets of interfaces:

Copy Code code as follows:

function addevent (Elem, EventName, handler) {
if (elem.attachevent) {
Elem.attachevent ("on" + EventName, function () {
Handler.call (Elem)});
Call () using the callback function here, let this point 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)});
Call () using the callback function here, let this point to Elem
else if (Elem.removeeventlistener) {
Elem.removeeventlistener (EventName, Handler, false);
}
}

In particular, Firefox, the this point in the event handler function points to the listener element itself, and in IE otherwise, the callback function call allows the current context to point to the listening element.

5. Mouse position

"Analysis of" ie, the even object has x,y properties, but there is no Pagex,pagey property, Firefox, even objects have pagex,pagey properties, but no x,y attributes.

"Compatibility Handling" uses mx (mx = event.x Event.x:event.pagex) to replace the event.x under IE or the Event.pagex under Firefox. Complex points also have to consider absolute position.

Copy Code code 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);
}