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
