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
| Event | Description | DOM |
|---|
| onclick | Event handler called when the user clicks on an object. | 2 |
| oncontext menu | Fired when the user clicks the right mouse button to open the context menu |
|
| ondblclick | Event handler called when the user double-clicks an object. | 2 |
| onmousedown | The mouse button is pressed. | 2 |
| onmouseenter | Fired when the mouse pointer moves over an element. | 2 |
| onmouseleave | Fired when the mouse pointer moves out of the element | 2 |
| onmousemove | The mouse is moved. | 2 |
| onmouseover | Move the mouse over an element. | 2 |
| onmouseout | The mouse is moved away from an element. | 2 |
| onmouseup | The mouse button is released. | 2 |
Keyboard event
| Event | 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
| Event | Description | DOM |
|---|
| onabort | The loading of the image is interrupted. (<object>) | 2 |
| onbeforeunload | The event is triggered when it is about to leave the page (refresh or close) | 2 |
| onerror | An error occurred while loading a document or image. ( <object>, <body> and <frameset>) |
|
| onhashchange | Which fires when the anchor part of the current URL is modified. |
|
| onload | A page or an image to complete the load. | 2 |
| onpageshow | This event is triggered when the user visits the page |
|
| onpagehide | This event is triggered when the user leaves the current page and jumps to another page |
|
| onresize | The window or frame is resized. | 2 |
| onscroll | An event that occurs when a document is scrolled. | 2 |
| onunload | The user exits the page. (<body> and <frameset>) | 2 |
Form event
| Event | Description | DOM |
|---|
| onblur | Triggered when an element loses focus | 2 |
| onchange | Which fires 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 | The element fires when it gets user input | 3 |
| onreset | Triggered when the form is reset | 2 |
| onsearch | Triggered when the user enters text into a search field (<input="search">) |
|
| onselect | Triggered when the user selects text (<input> and <textarea>) | 2 |
| onsubmit | Triggered when the form is submitted | 2 |
Clipboard event
| Event | Description | DOM |
|---|
| oncopy | This event is fired when the user copies the content of the element |
|
| oncut | This event fires when the user cuts the content of the element |
|
| onpaste | This event fires when the user pastes the content of the element |
|
Print event
| Event | Description | DOM |
|---|
| onafterprint | This event is fired when the page has started to print, or when the print window has been closed |
|
| onbeforeprint | This event fires when the page is about to start printing |
|
Drag event
| Event | Description | DOM |
|---|
| ondrag | This event fires when the element is being dragged |
|
| ondragend | This event fires when the user finishes dragging the element |
|
| ondragenter | This event fires when the dragged element enters the drop target |
|
| ondragleave | This event fires when the dragged element leaves the drop target |
|
| ondragover | This event fires when the dragged element is on the drop target |
|
| ondragstart | This event fires when the user starts dragging the element |
|
| ondrop | This event fires when the dragged element is placed in the target area |
|
Multimedia (Media) events
| Event | Description | DOM |
|---|
| onabort | The event fires when the video/audio terminates loading. |
|
| oncanplay | The event is fired when the user can start playing video/audio. |
|
| oncanplaythrough | The event fires when the video/audio can play normally without pausing and buffering. |
|
| ondurationchange | The event is fired when the duration of the video/audio changes. |
|
| onemptied | Triggered when the current playlist is empty |
|
| onended | The event fires when the video/audio playback ends. |
|
| onerror | The event is fired when an error occurs during video/audio data loading. |
|
| onloadeddata | The event is fired when the browser loads the current frame of the video/audio. |
|
| onloadedmetadata | The event fires after the specified video/audio metadata is loaded. |
|
| onloadstart | The event fires when the browser starts looking for the specified video/audio. |
|
| onpause | The event fires when the video/audio is paused. |
|
| onplay | The event is fired when the video/audio starts playing. |
|
| onplaying | The event is fired when the video/audio is paused or ready to restart after buffering. |
|
| onprogress | The event is fired when the browser downloads the specified video/audio. |
|
| onratechange | The event fires when the playback speed of the video/audio is changed. |
|
| onseeked | The event fires after the user repositions the video/audio playback position. |
|
| onseeking | The event fires when the user starts to reposition the video/audio. |
|
| onstalled | The event fires when the browser gets media data, but the media data is not available. |
|
| onsuspend | The event fires when the browser aborts from reading media data. |
|
| ontimeupdate | The event fires when the current playback position sends a change. |
|
| onvolumechange | The event fires when the volume changes. |
|
| onwaiting | The event fires when the video needs to be buffered because the next frame needs to be played. |
|
Animation event
| Event | Description | DOM |
|---|
| animationend | This event fires when the CSS animation finishes playing |
|
| animationiteration | This event fires when the CSS animation is repeated |
|
| animation start | This event fires when the CSS animation starts playing |
|
Transition event
| Event | Description | DOM |
|---|
| transitionend | This event fires after the CSS has completed the transition. |
|
Other events
| Event | Description | DOM |
|---|
| onmessage | This event is fired when a message is received by or from an object (WebSocket, Web Worker, Event Source or child frame or parent window) |
|
| onmousewheel | Depreciated. Use the onwheel event instead |
|
| ononline | This event is fired when the browser starts working online. |
|
| onoffline | This event is fired when the browser starts working offline. |
|
| onpopstate | This event fires when the window's browsing history (history object) changes. |
|
| onshow | This event is fired when the <menu> element is displayed in the context menu |
|
| onstorage | This event fires when Web Storage (HTML 5 Web Storage) is updated |
|
| ontoggle | This event fires when the user opens or closes the <details> element |
|
| onwheel | This event is fired when the mouse wheel scrolls up and down the element |
|
Event object
Constant
| Static | Description | DOM |
|---|
| CAPTURING-PHASE | The current event phase is the capture phase(1) | 1 |
| AT-TARGET | The current event is the target phase, during the evaluation of the target event (1) | 2 |
| BUBBLING-PHASE | The current event is the bubbling phase (3) | 3 |
Attributes
| Attribute | Description | DOM |
|---|
| bubbles | Returns a boolean indicating whether the event is a bubble event type. | 2 |
| cancelable | Returns a boolean indicating whether the event can have a default action that can be canceled. | 2 |
| currentTarget | Returns the element whose event listener triggered the event. | 2 |
| eventPhase | Returns the current stage of event propagation. | 2 |
| target | Returns the element that triggered this event (the event's 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 |
Method
| Method | Description | DOM |
|---|
| 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
| Method | Description | DOM |
|---|
| 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
| Method | Description | DOM |
|---|
| handleEvent() | Registers any object as an event handler. | 2 |
Document event object
Methods
| Method | Description | DOM |
|---|
| createEvent() |
| 2 |
Mouse/Keyboard event objects
Attributes
| Attribute | Description | DOM |
|---|
| altKey | Returns whether "ALT" 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 coordinates of the mouse pointer when the event is triggered. | 2 |
| clientY | Returns the vertical coordinates of the mouse pointer when the event is triggered. | 2 |
| ctrlKey | Returns whether the "CTRL" key was pressed when the event was triggered. | 2 |
| Location | Returns the position of the key on the device. | 3 |
| charCode | Returns the alphabetic code of the key value of the key that the onkeypress event triggers. | 2 |
| key | Returns the identifier of the key when the key is pressed. | 3 |
| keyCode | Returns 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 |
| which | Returns 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 |
| metaKey | Returns whether the "meta" key was pressed when the event was triggered. | 2 |
| relatedTarget | Returns the node associated with the target node of the event. | 2 |
| screenX | Returns the horizontal coordinates of the mouse pointer when an event is triggered. | 2 |
| screenY | Returns the vertical coordinates 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 value of the mouse event object. | 2 |
| initKeyboardEvent() | Initializes the value of the keyboard event object. | 3 |