Event Handling - IE & FFox

Hi,

This blog post summarizes the Event Handling in IE and Ffox. My experience – Its very confusing and iratic.

Event Object Detection:

There are lots of ways been given on google to do this. I found below to be very simple instead of doing it in my earliar post.

The best way to do this is as below.

function CheckKey(myEvent)

{

if(!myEvent) // Null for IE

{

myEvent = window.event;

}

}

Event Passing:

Fucntion Call	IE	FF
document. onkeydown= CheckKey;	Event not Passed	Event Passed (Automatically)
document. onkeydown = function(event){CheckKey(event);}	Event not Passed	Event Passed
<input type='text' id='entry' onkeydown ='CheckKey();' />	Event not Passed	Event not Passed
<input type='text' id='entry' onkeydown ='CheckKey(event);' />	Event Passed	Event Passed

function CheckKey(myEvent)

{

if(!myEvent)

{

myEvent = window.event;

alert('Event not Passed');

}

else

{

alert('Event Passed');

}

}

Event Cancel Bubbling:

There are lots of ways been given to cancel the event bubbling. But to be very honest, its luck if they work for you. I deveised a simple way of doing it in IE & Ffox.

In the below example, the action Ctrl-P (print) is cancelled.

function CheckKey(myEvent)

{

var Mozilla = myEvent;

if(!myEvent)

{

myEvent = window.event;

}

if(myEvent.ctrlKey)

{

if(myEvent.keyCode == 80)

{

if(!Mozilla) // IE

{

myEvent.keyCode = 505;

return false;

}

Else

{

return false; // Ffox

}

}

}

}

Note:

//myEvent.cancelBubble = true; // Does not work

//myEvent.returnValue = false; // Does not work

Event Properties Equivalence:

Below table summarizes the property name in IE and its equivalent in Ffox.

Not necessarily this will work all the time. J

Properties	FFox Equivalent?	Description
keyCode	Same (For KeyDown, KeyUp) charCode (Only for KeyPress).	Property indicating the Unicode for the key pressed. Use String.fromCharCode(keyCode) to convert code to string.
altKey, ctrlKey, shiftKey, metaKey	Same.	Boolean properties that indicate whether the Alt, Ctrl, and Shift keys were pressed at time of the event.
clientX, clientY	Same.	Returns the mouse coordinates at the time of the event relative to upper-left corner of the window. Example(s).
type	Same.	A string indicating the type of event, such as "mouseover", "click", etc.
srcElement	target	The element in which the event occurred on.
offsetX, offsetY	N/A	Returns the mouse coordinates relative to the originating element.
button	Same, but different return values.	An integer indicating which mouse button was pressed or released, 1 = left, 2 = right, 4 = middle. If multiple buttons are pressed, the value is the sum of both buttons, such as 3 (1+2) for left and right.
cancelBubble	stopPropagation()	Set to true to prevent the event from bubbling.
fromElement, toElement	relatedTarget	For mouseover and mouseout events, these properties indicate the elements the mouse is leaving from and moving onto, respectively.
returnValue	preventDefault()	Set to false to cancel any default action for the event.

Hope this helps.

Thanks & Regards,

Arun Manglick || Tech Lead