HTML DOM Events


HTML DOM Events

HTML DOM events allow Javascript to register various event handlers on HTML document elements.

Events are often used in conjunction with functions, functions are not executed until the event occurs! (eg user clicks a button).

Tip: The event model is specified in W3C Level 2 DOM Events.


HTML DOM Events

DOM: Indicates the DOM attribute level used.

Mouse event

EventDescriptionDOM
onclickEvent handler called when the user clicks on an object.2
oncontext menuFired when the user clicks the right mouse button to open the context menu
ondblclickEvent handler called when the user double-clicks an object.2
onmousedownThe mouse button is pressed.2
onmouseenterFired when the mouse pointer moves over an element.2
onmouseleaveFired when the mouse pointer moves out of the element2
onmousemoveThe mouse is moved.2
onmouseoverMove the mouse over an element.2
onmouseoutThe mouse is moved away from an element.2
onmouseupThe mouse button is released.2

Keyboard event

EventDescriptionDOM
onkeydownA keyboard key is pressed.2
onkeypressA keyboard key is pressed and released.2
onkeyupA keyboard key is released.2

Frame / Object events

EventDescriptionDOM
onabortThe loading of the image is interrupted. (<object>)2
onbeforeunloadThe event is triggered when it is about to leave the page (refresh or close)2
onerrorAn error occurred while loading a document or image. ( <object>, <body> and <frameset>)
onhashchangeWhich fires when the anchor part of the current URL is modified.
onloadA page or an image to complete the load.2
onpageshowThis event is triggered when the user visits the page
onpagehideThis event is triggered when the user leaves the current page and jumps to another page
onresizeThe window or frame is resized.2
onscrollAn event that occurs when a document is scrolled.2
onunloadThe user exits the page. (<body> and <frameset>)2

Form event

EventDescriptionDOM
onblurTriggered when an element loses focus2
onchangeWhich fires when the content of a form element changes (<input>, <keygen>, <select>, and <textarea>)2
onfocusTriggered when an element gains focus2
onfocusinTriggered when an element is about to gain focus2
onfocusoutTriggered when an element is about to lose focus2
oninputThe element fires when it gets user input3
onresetTriggered when the form is reset2
onsearchTriggered when the user enters text into a search field (<input="search">)
onselectTriggered when the user selects text (<input> and <textarea>)2
onsubmitTriggered when the form is submitted2

Clipboard event

EventDescriptionDOM
oncopyThis event is fired when the user copies the content of the element
oncutThis event fires when the user cuts the content of the element
onpasteThis event fires when the user pastes the content of the element

Print event

EventDescriptionDOM
onafterprintThis event is fired when the page has started to print, or when the print window has been closed
onbeforeprintThis event fires when the page is about to start printing

Drag event

EventDescriptionDOM
ondragThis event fires when the element is being dragged
ondragendThis event fires when the user finishes dragging the element
ondragenterThis event fires when the dragged element enters the drop target
ondragleaveThis event fires when the dragged element leaves the drop target
ondragoverThis event fires when the dragged element is on the drop target
ondragstartThis event fires when the user starts dragging the element
ondropThis event fires when the dragged element is placed in the target area

Multimedia (Media) events

EventDescriptionDOM
onabortThe event fires when the video/audio terminates loading.
oncanplayThe event is fired when the user can start playing video/audio.
oncanplaythroughThe event fires when the video/audio can play normally without pausing and buffering.
ondurationchangeThe event is fired when the duration of the video/audio changes.
onemptiedTriggered when the current playlist is empty
onendedThe event fires when the video/audio playback ends.
onerrorThe event is fired when an error occurs during video/audio data loading.
onloadeddataThe event is fired when the browser loads the current frame of the video/audio.
onloadedmetadataThe event fires after the specified video/audio metadata is loaded.
onloadstartThe event fires when the browser starts looking for the specified video/audio.
onpauseThe event fires when the video/audio is paused.
onplayThe event is fired when the video/audio starts playing.
onplayingThe event is fired when the video/audio is paused or ready to restart after buffering.
onprogressThe event is fired when the browser downloads the specified video/audio.
onratechangeThe event fires when the playback speed of the video/audio is changed.
onseekedThe event fires after the user repositions the video/audio playback position.
onseekingThe event fires when the user starts to reposition the video/audio.
onstalledThe event fires when the browser gets media data, but the media data is not available.
onsuspendThe event fires when the browser aborts from reading media data.
ontimeupdateThe event fires when the current playback position sends a change.
onvolumechangeThe event fires when the volume changes.
onwaitingThe event fires when the video needs to be buffered because the next frame needs to be played.

Animation event

EventDescriptionDOM
animationendThis event fires when the CSS animation finishes playing
animationiterationThis event fires when the CSS animation is repeated
animation startThis event fires when the CSS animation starts playing

Transition event

EventDescriptionDOM
transitionendThis event fires after the CSS has completed the transition.

Other events

EventDescriptionDOM
onmessageThis event is fired when a message is received by or from an object (WebSocket, Web Worker, Event Source or child frame or parent window)
onmousewheelDepreciated. Use the onwheel event instead
ononlineThis event is fired when the browser starts working online.
onofflineThis event is fired when the browser starts working offline.
onpopstateThis event fires when the window's browsing history (history object) changes.
onshowThis event is fired when the <menu> element is displayed in the context menu
onstorageThis event fires when Web Storage (HTML 5 Web Storage) is updated
ontoggleThis event fires when the user opens or closes the <details> element
onwheelThis event is fired when the mouse wheel scrolls up and down the element

Event object

Constant

StaticDescriptionDOM
CAPTURING-PHASEThe current event phase is the capture phase(1)1
AT-TARGETThe current event is the target phase, during the evaluation of the target event (1) 2
BUBBLING-PHASEThe current event is the bubbling phase (3)3

Attributes

AttributeDescriptionDOM
bubblesReturns a boolean indicating whether the event is a bubble event type.2
cancelableReturns a boolean indicating whether the event can have a default action that can be canceled.2
currentTargetReturns the element whose event listener triggered the event.2
eventPhaseReturns the current stage of event propagation.2
targetReturns the element that triggered this event (the event's target node).2
timeStampReturns the date and time the event was generated.2
typeReturns the name of the event represented by the current Event object.2

Method

MethodDescriptionDOM
initEvent()Initializes the properties of the newly created Event object.2
preventDefault()Informs the browser not to perform the default action associated with the event.2
stopPropagation()No longer dispatch events.2

Target event object

Methods

MethodDescriptionDOM
addEventListener()Allows registration of listener events in the target event (IE8 = attachEvent())2
dispatchEvent()Allows sending events to the Listener (IE8 = fireEvent())2
removeEventListener()Runs a listener event registered on the event target (IE8 = detachEvent())2

Event listener object

Methods

MethodDescriptionDOM
handleEvent()Registers any object as an event handler.2

Document event object

Methods

MethodDescriptionDOM
createEvent()
2

Mouse/Keyboard event objects

Attributes

AttributeDescriptionDOM
altKeyReturns whether "ALT" was pressed when the event was triggered.2
buttonReturns which mouse button was clicked when the event was triggered.2
clientXReturns the horizontal coordinates of the mouse pointer when the event is triggered.2
clientYReturns the vertical coordinates of the mouse pointer when the event is triggered.2
ctrlKeyReturns whether the "CTRL" key was pressed when the event was triggered.2
LocationReturns the position of the key on the device.3
charCodeReturns the alphabetic code of the key value of the key that the onkeypress event triggers.2
keyReturns the identifier of the key when the key is pressed.3
keyCodeReturns the character code of the value of the key triggered by the onkeypress event, or the code of the key of the onkeydown or onkeyup event.2
whichReturns the character code of the value of the key triggered by the onkeypress event, or the code of the key of the onkeydown or onkeyup event.2
metaKeyReturns whether the "meta" key was pressed when the event was triggered.2
relatedTargetReturns the node associated with the target node of the event.2
screenXReturns the horizontal coordinates of the mouse pointer when an event is triggered.2
screenYReturns the vertical coordinates of the mouse pointer when an event is triggered.2
shiftKeyReturns whether the SHIFT key was pressed when the event was triggered.2

Methods

MethodDescriptionW3C
initMouseEvent()Initializes the value of the mouse event object.2
initKeyboardEvent()Initializes the value of the keyboard event object.3