HTML DOM Event
HTML DOM Events
HTML DOM events allow JavaScript to register different event handlers on HTML document elements.
Events are usually used in combination with functions, and functions will not be executed before the event occurs! (such as when a user clicks a button).
Tip:The event model is standardized in the W3C DOM Level 2 Events.
HTML DOM Events
DOM：Indicates the DOM attribute level used.
Mouse Events
| Attribute |
Description |
DOM |
| onclick |
Event handler called when the user clicks an object. |
2 |
| oncontextmenu |
Triggered 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 down. |
2 |
| onmouseenter |
Triggered when the mouse pointer moves onto an element. |
2 |
| onmouseleave |
Triggered when the mouse pointer moves out of an element. |
2 |
| onmousemove |
The mouse is moved. |
2 |
| onmouseover |
The mouse is moved over an element. |
2 |
| onmouseout |
The mouse is moved away from an element. |
2 |
| onmouseup |
The mouse button is released. |
2 |
Keyboard Events
| Attribute |
Description |
DOM |
| onkeydown |
A keyboard key is pressed down. |
2 |
| onkeypress |
A keyboard key is pressed down and released. |
2 |
| onkeyup |
A keyboard key is released. |
2 |
Frame/Object Events
| Attribute |
Description |
DOM |
| onabort |
The loading of an image is interrupted. ( <object>) |
2 |
| onbeforeunload |
This event is triggered when about to leave the page (refresh or close). |
2 |
| onerror |
An error occurs while loading a document or an image. ( <object>, <body> and <frameset>) |
|
| onhashchange |
This event is triggered when the anchor part of the current URL is modified. |
|
| onload |
A page or an image has finished loading. |
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 navigates to another page. |
|
| onresize |
The window or frame is resized. |
2 |
| onscroll |
Event that occurs when a document is scrolled. |
2 |
| onunload |
The user exits the page. ( <body> and <frameset>) |
2 |
Form Events
| Attribute |
Description |
DOM |
| onblur |
Triggered when an element loses focus. |
2 |
| onchange |
This event is triggered when the content of a form element changes ( <input>, <keygen>, <select>, and <textarea>) |
2 |
| onfocus |
Triggered when an element gets focus. |
2 |
| onfocusin |
Triggered when an element is about to get 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 the user types text into a search field ( <input="search">) |
|
| onselect |
Triggered when the user selects text ( <input> and <textarea>) |
2 |
| onsubmit |
Triggered when a form is submitted. |
2 |
Clipboard Events
| Attribute |
Description |
DOM |
| oncopy |
This event is triggered when the user copies the content of an element. |
|
| oncut |
This event is triggered when the user cuts the content of an element. |
|
| onpaste |
This event is triggered when the user pastes the content of an element. |
|
Print Events
| Attribute |
Description |
DOM |
| onafterprint |
This event is triggered after the page has started printing, or when the print window has been closed. |
|
| onbeforeprint |
This event is triggered when the page is about to start printing. |
|
Drag Events
| Event |
Description |
DOM |
| ondrag |
This event is triggered when an element is being dragged. |
|
| ondragend |
This event is triggered when the user finishes dragging an element. |
|
| ondragenter |
This event is triggered when a dragged element enters the drop target. |
|
| ondragleave |
This event is triggered when a dragged element leaves the drop target. |
|
| ondragover |
This event is triggered when a dragged element is over the drop target. |
|
| ondragstart |
This event is triggered when the user starts dragging an element. |
|
| ondrop |
This event is triggered when a dragged element is dropped on the target area. |
|
Media Events
| Event |
Description |
DOM |
| onabort |
The event is triggered when the video/audio (audio/video) aborts loading. |
|
| oncanplay |
The event is triggered when the user can start playing the video/audio (audio/video). |
|
| oncanplaythrough |
The event is triggered when the video/audio (audio/video) can be played normally without pausing and buffering. |
|
| ondurationchange |
The event is triggered when the duration of the video/audio (audio/video) changes. |
|
| onemptied |
Triggered when the current playlist is empty. |
|
| onended |
The event is triggered when the video/audio (audio/video) playback ends. |
|
| onerror |
The event is triggered when an error occurs during the loading of video/audio (audio/video) data. |
|
| onloadeddata |
The event is triggered when the browser loads the current frame of the video/audio (audio/video). |
|
| onloadedmetadata |
The event is triggered after the metadata of the 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 the video/audio (audio/video) is paused. |
|
| onplay |
The event is triggered when the video/audio (audio/video) starts playing. |
|
| onplaying |
The event is triggered when the video/audio (audio/video) is paused or is ready to resume playback after buffering. |
|
| onprogress |
The event is triggered when the browser downloads the specified video/audio (audio/video). |
|
| onratechange |
The event is triggered when the playback speed of the video/audio (audio/video) changes. |
|
| onseeked |
The event is triggered after the user repositions the playback position of the video/audio (audio/video). |
|
| onseeking |
The event is triggered when the user starts repositioning the video/audio (audio/video). |
|
| onstalled |
The event is triggered when the browser fetches media data, but the media data is unavailable. |
|
| onsuspend |
The event is triggered when the browser aborts reading 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 the video needs to buffer in order to play 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 is repeated. |
|
| animationstart |
This event is triggered when a CSS animation starts playing. |
|
Transition Events
| Event |
Description |
DOM |
| transitionend |
This event is triggered after the CSS transition has completed. |
|
Other Events
| Event |
Description |
DOM |
| onmessage |
This event is triggered when a message is received through or from an object (WebSocket, Web Worker, Event Source, or a child frame or parent window). |
|
| onmousewheel |
Deprecated.Useonwheelevent instead. |
|
| 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 (history object) of the window changes. |
|
| onshow |
This event is triggered when the <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 the <details> element. |
|
| onwheel |
This event is triggered when the mouse wheel scrolls up or down over an element. |
|
| visibilitychange |
This event is used to detect whether the visibility state of the current page has changed. |
|
Event Object
Constants
| Static Variables |
Description |
DOM |
| CAPTURING-PHASE |
Current event phase is the capture phase (1) |
1 |
| AT-TARGET |
The current event is the target phase, evaluating the target event (1) |
2 |
| BUBBLING-PHASE |
The current event is the bubble phase (3) |
3 |
Properties
| Properties |
Description |
DOM |
| bubbles |
Returns a boolean value indicating whether the event is a bubbling event type. |
2 |
| cancelable |
Returns a boolean value indicating whether the event has a cancellable default action. |
2 |
| currentTarget |
Returns the element whose event listener triggered the event. |
2 |
| eventPhase |
Returns the current phase of event propagation. |
2 |
| target |
Returns the element that triggered this event (the target node of the event). |
2 |
| timeStamp |
Returns the date and time when the event was generated. |
2 |
| type |
Returns the name of the event represented by the current Event object. |
2 |
Methods
| Methods |
Description |
DOM |
| initEvent() |
Initializes the properties of a newly created Event object. |
2 |
| preventDefault() |
Notifies the browser not to execute the default action associated with the event. |
2 |
| stopPropagation() |
Stops dispatching the event. |
2 |
Target Event Object
Methods
| Methods |
Description |
DOM |
| addEventListener() |
Allows registering listener events on the target event (IE8 = attachEvent()) |
2 |
| dispatchEvent() |
Allows sending events to listeners (IE8 = fireEvent()) |
2 |
| removeEventListener() |
Runs a listener event registered on the event target once (IE8 = detachEvent()) |
2 |
Event Listener Object
Methods
| Methods |
Description |
DOM |
| handleEvent() |
Registers any object as an event handler. |
2 |
Document Event Object
Methods
| Methods |
Description |
DOM |
| createEvent() |
|
2 |
Mouse/Keyboard Event Objects
Properties
| Properties |
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 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 |
Location |
Returns the position of the key on the device. |
3 |
| charCode | Returns the character code of the key value that triggered the onkeypress event. | 2 |
| key | Returns the identifier of the key when the key is pressed. | 3 |
| keyCode | Returns the character code of the key value triggered by the onkeypress event, or the key code of the onkeydown or onkeyup event. | 2 |
| which | Returns the character code of the key value triggered by the onkeypress event, or the key code 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 related to the target node of the event. |
2 |
| screenX |
Returns the horizontal coordinate of the mouse pointer when an event was triggered. |
2 |
| screenY |
Returns the vertical coordinate of the mouse pointer when an event was triggered. |
2 |
| shiftKey |
Returns whether the "SHIFT" key was pressed when the event was triggered. |
2 |
Methods
| Methods |
Description |
W3C |
| initMouseEvent() |
Initializes the value of the mouse event object. |
2 |
| initKeyboardEvent() |
Initializes the value of the keyboard event object. |
3 |
Other extensions