Event Model

In Mozilla/Firefox, obj.addEventListener('click', func, true); function func(e){ if(e.target ...)... } In Internet Explorer, obj.attachEvent('onclick', func); function func(e){ if(e.srcElement ...)... } The following code is a crossdomain solution for add/remove Event: function addEvent( obj, type, fn ) { if ( obj.attachEvent ) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent( "on"+type, obj[type+fn] ); } else obj.addEventListener( type, fn, false ); } function removeEvent( obj, type, fn ) { if ( obj.detachEvent ) { obj.detachEvent( "on"+type, obj[type+fn] ); obj[type+fn] = null; } else obj.removeEventListener( type, fn, false ); }

IE Event Object

In IE, the event object is accessed completely through the explicit object "window.event". It supports the following properties:

Properties

Properties Description NS Equivalent?
altKey, ctrlKey, shiftKey Boolean properties that indicate whether the Alt, Ctrl, and Shift keys were pressed at time of the event. Same.
button 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. Same, but different return values.
cancelBubble Set to true to prevent the event from bubbling. stopPropagation()
clientX, clientY Returns the mouse coordinates at the time of the event relative to upper-left corner of the window. Same.
fromElement, toElement For mouseover and mouseout events, these properties indicate the elements the mouse is leaving from and moving onto, respectively. relatedTarget
keyCode Property indicating the Unicode for the key pressed. Use String.fromCharCode(keyCode) to convert code to string. charCode
offsetX, offsetY Returns the mouse coordinates relative to the originating element. N/A
returnValue Set to false to cancel any default action for the event. preventDefault()
srcElement The element in which the event occurred on. target
type A string indicating the type of event, such as "mouseover", "click", etc. Same.

NS Event Object

In NS6+, the event object is accessed by passing an event parameter into the event handler function in question.

Properties

Properties Description IE Equivalent?
altKey, ctrlKey, metaKey, shiftKey Boolean properties that indicate whether the Alt, Ctrl, Meta, and Shift keys were pressed at time of the event. Same, though IE doesn't support "metaKey".
bubbles A Boolean value indicating whether or not the event bubbles. N/A
button An integer indicating which mouse button was pressed or released, 0 = left, 2 = right, 1 = middle. Slightly different in IE, as described above. Same, but different return values.
cancelable A Boolean value indicating whether or not the event can be canceled. N/A
charCode Property indicating the Unicode for the key pressed. Use String.fromCharCode(which) to convert code to string. keyCode
clientX, clientY Returns the mouse coordinates at the time of the event relative to upper-left corner of the window. Same.
currentTarget The node that this event handler is currently being run on. N/A
eventPhase An integer value indicating which phase of the event flow this event is being processed in. One of CAPTURING_PHASE (1), AT_TARGET (2) or BUBBLING_PHASE (3). N/A
layerX, layerY Returns the mouse coordinates relative to the container element. (non standard). offsetX, offsetY
pageX, pageY Returns the left and top coordinates of event relative to the top left corner of the visible page. pageY would return the same value as "window.pageYOffset+e.clientY", for example. N/A
relatedTarget On a "mouseover" event it indicates the node that the mouse has left. On a "mouseout" event it indicates the node the mouse has moved onto. fromElement, toElement
screenX, screenY Returns the coordinates of the mouse relative to the screen when the event fired. N/A
target The node that the event originated from. srcElement
timestamp Returns the time (in milliseconds since the epoch) the event was created, for example, when a key was pressed (onkeypress). Not all events return a timestamp. N/A
type A string indicating the type of event, such as "mouseover", "click", etc. Same.
which NS4/NS6+ legacy property indicating the Unicode for the key pressed. Identical to "charCode", except this property works in NS4 as well.. keyCode

Methods

Methods Description IE Equivalent?
preventDefault() Set to true to cancel any default action for the event. returnValue
stopPropagation() Set to true to prevent the event from bubbling. cancelBubble