JS: DOM Events

this page is a short intro on DOM event object. For basics of how to use event, see:

• Intro to Event-Based Programing
• JS: Add, Remove Event Handler

event Properties

• event.altKey
• event.bubbles
• event.button
• event.cancelBubble
• event.cancelable
• event.charCode
• event.clientX
• event.clientY
• event.ctrlKey
• event.currentTarget
• event.defaultPrevented
• event.detail
• event.eventPhase
• event.explicitOriginalTarget
• event.isChar
• event.keyCode
• event.layerX
• event.layerY
• event.metaKey
• event.originalTarget
• event.pageX
• event.pageY
• event.relatedTarget
• event.screenX
• event.screenY
• event.shiftKey
• event.target
• event.timeStamp
• event.type
• event.view
• event.which

Methods

• event.createEvent()
• event.initEvent()
• event.initKeyEvent()
• event.initMouseEvent()
• event.initUIEvent()
• event.preventDefault()
• event.stopImmediatePropagation()
• event.stopPropagation()

write about stopPropagation

button.addEventListener ("click", function(e){
e.stopPropagation();
/* ... */
}, false);

write about stopPropagation

ou can prevent the default action with the preventDefault() function on the event object. Alternatively, you can just return false from the handler:

form.addEventListener ("submit", function(e){
/* ... */
return confirm("Are you super sure?");
}, false);

If the call to confirm() returns false—

write about The Event Object

when a event is fired, its event handler is passed a event object.

modern browsers support this object, except IE8 and below

methods

• stopPropagation()
• preventDefault()

• bubbles: A boolean indicating whether the event bubbles up through the DOM

• button: show which mouse button is pressed
• ctrlKey:
• altKey:
• shiftKey:
• metaKey:

keyboard event Properties

• isChar: A boolean indicating whether the event has a key character
• charCode: A unicode value of the pressed key (for keypress events only)
• keyCode: A unicode value of a noncharacter key
• which: A unicode value of the pressed key, regardless of whether it's a character: Where the event happened:
• pageX, pageY: The event coordinates relative to the page (i.e., viewport)
• screenX, screenY: The event coordinates relative to the screen

Elements associated with the event:

• currentTarget: The current DOM element within the event bubbling phase target
• originalTarget: The original DOM element
• relatedTarget: The other DOM element involved in the event, if any

• JS: Add, Remove Event Handler