HTML DOM
HTML DOM Events
HTML DOM events allow JavaScript to register different event handlers within HTML document elements.
Events are often used in conjunction with functions, which are not executed before the event occurs! (e.g., when a user clicks a button).
Tip: The event model is standardized in the W3C Level 2 DOM Events specification.
HTML DOM Events
DOM: Specifies the DOM property level used.
Mouse Events
Property |
Description |
DOM |
onclick |
The event handler called when a user clicks an object. |
2 |
oncontextmenu |
Triggered when a user opens the context menu by right-clicking the mouse. |
|
ondblclick |
The event handler called when a user double-clicks an object. |
2 |
onmousedown |
The mouse button is pressed. |
2 |
onmouseenter |
Triggered when the mouse pointer moves over an element. |
2 |
onmouseleave |
Triggered when the mouse pointer moves out of an element. |
2 |
onmousemove |
The mouse is moved. |
2 |
onmouseover |
The mouse moves over an element. |
2 |
onmouseout |
The mouse moves out of an element. |
2 |
onmouseup |
The mouse button is released. |
2 |
Keyboard Events
Property |
Description |
DOM |
onkeydown |
A keyboard key is pressed. |
2 |
onkeypress |
A keyboard key is pressed and released. |
2 |
onkeyup |
A keyboard key is released. |
2 |
Frame/Object Events
Property |
Description |
DOM |
onabort |
The loading of an image is interrupted. ( <object>) |
2 |
onbeforeunload |
The event is triggered when the page is about to be left (refresh or close). |
2 |
onerror |
An error occurs while loading a document or image. ( <object>, <body>, and <frameset>) |
|
onhashchange |
The event is triggered when the anchor part of the current URL is modified. |
|
onload |
A page or an image is fully loaded. |
2 |
onpageshow |
The event is triggered when a user accesses a page. |
|
onpagehide |
The event is triggered when a user leaves the current page to go to another. |
|
onresize |
The window or frame is resized. |
2 |
onscroll |
The event occurs when the document is scrolled. |
2 |
onunload |
The user exits the page. ( <body> and <frameset>) |
2 |
Form Events
Property |
Description |
DOM |
onblur |
Triggered when an element loses focus. |
2 |
onchange |
The event is triggered when the content of a form element changes ( <input>, <keygen>, <select>, and <textarea>). |
2 |
onfocus |
Triggered when an element gains focus. |
2 |
onfocusin |
Triggered when an element is about to gain focus. |
2 |
onfocusout |
Triggered when an element is about to lose focus. |
2 |
oninput |
Triggered when an element receives user input. |
3 |
onreset |
Triggered when a form is reset. |
2 |
onsearch |
Triggered when a user inputs text into a search field ( <input="search">). |
|
onselect |
Triggered when a user selects text ( <input> and <textarea>). |
2 |
onsubmit |
Triggered when a form is submitted. |
2 |
Clipboard Events
Property |
Description |
DOM |
oncopy |
The event is triggered when a user copies the content of an element. |
|
oncut |
The event is triggered when a user cuts the content of an element. |
|
onpaste |
The event is triggered when a user pastes content into an element. |
|
Print Events
Property |
Description |
DOM |
onafterprint |
The event is triggered when the page has started printing or the print window has closed. |
|
onbeforeprint |
The event is triggered when the page is about to start printing. |
|
Drag Events
Event |
Description |
DOM |
ondrag |
The event is triggered when an element is being dragged. |
|
ondragend |
The event is triggered when a user finishes dragging an element. |
|
ondragenter |
The event is triggered when a dragged element enters the drop target. |
|
ondragleave |
The event is triggered when a dragged element leaves the drop target. |
|
ondragover |
The event is triggered when a dragged element is over the drop target. |
|
ondragstart |
The event is triggered when a user starts dragging an element. |
|
ondrop |
The event is triggered when a dragged element is dropped in the target area. |
|
Multimedia (Media) Events
Event |
Description |
DOM |
onabort |
The event is triggered when the loading of a video/audio (audio/video) is aborted. |
|
oncanplay |
The event is triggered when a user can start playing a video/audio (audio/video). |
|
oncanplaythrough |
The event is triggered when a video/audio (audio/video) can be played all the way through without stopping for buffering. |
|
ondurationchange |
The event is triggered when the duration of a video/audio (audio/video) changes. |
|
onemptied |
Triggered when the current playlist is empty. |
|
onended |
The event is triggered when a video/audio (audio/video) playback ends. |
|
onerror |
The event is triggered when an error occurs during the loading of a video/audio (audio/video) data. |
|
onloadeddata |
The event is triggered when the browser loads the current frame of a video/audio (audio/video). |
|
onloadedmetadata |
The event is triggered after the metadata of a specified video/audio (audio/video) is loaded. |
|
onloadstart |
The event is triggered when the browser starts looking for the specified video/audio (audio/video). |
|
onpause |
The event is triggered when a video/audio (audio/video) is paused. |
|
onplay |
The event is triggered when a video/audio (audio/video) starts playing. |
|
onplaying |
The event is triggered when a video/audio (audio/video) is paused or after buffering and is ready to resume playing. |
|
onprogress |
The event is triggered when the browser downloads a specified video/audio (audio/video). |
|
onratechange |
The event is triggered when the playback speed of a video/audio (audio/video) changes. |
|
onseeked |
The event is triggered after a user repositions the playback position of a video/audio (audio/video). |
|
onseeking |
The event is triggered when a user starts repositioning the playback position of a video/audio (audio/video). |
|
onstalled |
The event is triggered when the browser is trying to get media data, but the data is not available. |
|
onsuspend |
The event is triggered when the browser stops fetching media data. |
|
ontimeupdate |
The event is triggered when the current playback position changes. |
|
onvolumechange |
The event is triggered when the volume changes. |
|
onwaiting |
The event is triggered when a video needs to buffer the next frame. |
|
Animation Events
Event |
Description |
DOM |
animationend |
This event is triggered when a CSS animation finishes playing. |
|
animationiteration |
This event is triggered when a CSS animation repeats playing. |
|
animationstart |
This event is triggered when a CSS animation starts playing. |
|
Transition Events
Event |
Description |
DOM |
transitionend |
This event is triggered after a CSS transition completes. |
|
Other Events
Event |
Description |
DOM |
onmessage |
This event is triggered when a message is received from an object (WebSocket, Web Worker, Event Source, or child frame or parent window). |
|
onmousewheel |
Deprecated. Use onwheel |
|
ononline |
This event is triggered when the browser starts working online. |
|
onoffline |
This event is triggered when the browser starts working offline. |
|
onpopstate |
This event is triggered when the browsing history of the window (history object) changes. |
|
onshow |
This event is triggered when a <menu> element is displayed in the context menu. |
|
onstorage |
This event is triggered when Web Storage (HTML 5 Web Storage) is updated. |
|
ontoggle |
This event is triggered when the user opens or closes a <details> element. |
|
onwheel |
This event is triggered when the mouse wheel scrolls up or down over an element. |
|
Event Object
Constants
Static Variable |
Description |
DOM |
CAPTURING-PHASE |
The current event phase is the capture phase (1). |
1 |
AT-TARGET |
The current event is in the target phase, evaluating the target event (1). |
2 |
BUBBLING-PHASE |
The current event is in the bubbling phase (3). |
3 |
Properties
Property |
Description |
DOM |
bubbles |
Returns a boolean indicating whether the event is a bubbling event type. |
2 |
cancelable |
Returns a boolean indicating whether the event can have its default action canceled. |
2 |
currentTarget |
Returns the element whose event listeners triggered the event. |
2 |
eventPhase |
Returns the current phase of event propagation. |
2 |
target |
Returns the element that triggered this event (the target node). |
2 |
timeStamp |
Returns the date and time the event was generated. |
2 |
type |
Returns the name of the event represented by the current Event object. |
2 |
Methods
Method |
Description |
DOM |
initEvent() |
Initializes the properties of a newly created Event object. |
2 |
preventDefault() |
Informs the browser not to perform the default action associated with the event. |
2 |
stopPropagation() |
Stops further dispatch of the event. |
2 |
Target Event Object
Methods
Method |
Description |
DOM |
addEventListener() |
Allows registering event listeners within the target event (IE8 = attachEvent()). |
2 |
dispatchEvent() |
Allows sending events to listeners (IE8 = fireEvent()). |
2 |
removeEventListener() |
Executes once registered event listeners on the event target (IE8 = detachEvent()). |
2 |
Event Listener Object
Methods
Method |
Description |
DOM |
handleEvent() |
Registers any object as an event handler. |
2 |
Document Event Object
Methods
Method |
Description |
DOM |
createEvent() |
|
2 |
Mouse/Keyboard Event Object
Properties
Property |
Description |
DOM |
altKey |
Returns whether the "ALT" key was pressed when the event was triggered. |
2 |
button |
Returns which mouse button was clicked when the event was triggered. |
2 |
clientX |
Returns the horizontal coordinate of the mouse pointer when the event was triggered. |
2 |
clientY |
Returns the vertical coordinate of the mouse pointer when the event was triggered. |
2 |
ctrlKey |
Returns whether the "CTRL" key was pressed when the event was triggered. |
2 |
charCode |
Returns the character code of the key value that triggered the onkeypress event. |
2 |
key |
Returns the identifier of the key pressed when the event is triggered. |
3 |
keyCode |
Returns the character code of the key value that triggered the onkeypress event, or the key code for onkeydown or onkeyup events. |
2 |
which |
Returns the character code of the key value that triggered the onkeypress event, or the key code for onkeydown or onkeyup events. |
2 |
metaKey |
Returns whether the "meta" key was pressed when the event was triggered. |
2 |
relatedTarget |
Returns the node related to the target node of the event. |
2 |
screenX |
Returns the horizontal coordinate of the mouse pointer when an event is triggered. |
2 |
screenY |
Returns the vertical coordinate of the mouse pointer when an event is triggered. |
2 |
shiftKey |
Returns whether the "SHIFT" key was pressed when the event was triggered. |
2 |
Methods
Method |
Description |
W3C |
initMouseEvent() |
Initializes the values of a mouse event object. |
2 |
initKeyboardEvent() |
Initializes the values of a keyboard event object. |
3 |