js dom events include: abort, afterprint, blur, canplay, change, click, copy, cut, dblclick, drag, drop, ended, error, focus, open, load, play, etc.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
HTML DOM Events
HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.
Events are often used in conjunction with functions that are not executed until the event occurs (such as when the user clicks a button).
| Event | Description |
|---|---|
| abort | This event occurs when media loading is aborted. |
| afterprint | This event occurs when the page starts printing, or when the print dialog box is closed. |
| animationend | This event occurs when the CSS animation completes. |
| animationiteration | This event occurs when a CSS animation is repeated. |
| animationstart | CSS This event occurs when the animation starts. |
| beforeprint | This event occurs when the page is about to be printed. |
| beforeunload | This event occurs just before the document is unloaded. |
| blur | This event occurs when the element loses focus. |
| canplay | This event occurs when the browser can start playing media. |
| canplaythrough | This event occurs when the browser can play the media without stopping buffering. |
| change | This event occurs when the content of the form element, the selected content, or the selected state changes |
| click | This event occurs when the user clicks on an element. |
| contextmenu | This event occurs when the user right-clicks an element to open the context menu. |
| copy | This event occurs when the user copies the content of an element. |
| cut | This event occurs when the user cuts the content of an element. |
| dblclick | This event occurs when the user double-clicks an element. |
| drag | This event occurs when an element is dragged. |
| dragend | This event occurs when the user has finished dragging the element. |
| dragenter | This event occurs when the dragged element enters the drop target. |
| dragleave | This event occurs when the dragged element leaves the drop target. |
| dragover | This event occurs when the dragged element is over the drop target. |
| dragstart | This event occurs when the user starts dragging an element. |
| drop | This event occurs when a dragged element is dropped on the drop target. |
| durationchange | This event occurs when the media duration changes. |
| #ended | This event occurs when the media reaches the end. |
| error | This event occurs when an error occurs while loading an external file. |
| focus | This event occurs when an element gains focus. |
| focusin | This event occurs when an element is about to gain focus. |
| focusout | This event occurs when an element is about to lose focus. |
| fullscreenchange | This event occurs when the element is displayed in full screen mode. |
| fullscreenerror | This event occurs when the element cannot be displayed in full screen mode. |
| hashchange | This event occurs when the anchor portion of the URL changes. |
| input | This event occurs when the element gets user input. |
| invalid | This event occurs when the element is invalid. |
| keydown | This event occurs when the user is pressing a key. |
| keypress | This event occurs when the user presses a key. |
| keyup | This event occurs when the user releases the key. |
| load | This event occurs when the object has been loaded. |
| loadeddata | This event occurs after the media data is loaded. |
| loadedmetadata | This event occurs when metadata (such as size and duration) is loaded. |
| loadstart | This event occurs when the browser starts looking for the specified media. |
| message | This event occurs when a message is received through this event source. |
| mousedown | This event occurs when the user presses the mouse button on an element. |
| mouseenter | This event occurs when the pointer moves over the element. |
| mouseleave | This event occurs when the pointer moves out of the element. |
| mousemove | This event occurs when the pointer moves over an element. |
| mouseout | This event occurs when the user moves the mouse pointer out of an element or its child elements. |
| mouseover | This event occurs when the pointer moves over an element or its child elements. |
| mouseup | This event occurs when the user releases the mouse button on the element. |
| offline | This event occurs when the browser starts working offline. |
| online | This event occurs when the browser starts working online. |
| open | This event occurs when a connection to the event source is opened. |
| pagehide | This event occurs when the user leaves a page to navigate. |
| pageshow | This event occurs when the user navigates to a web page. |
| paste | This event occurs when the user pastes some content into an element. |
| pause | This event occurs when the media is paused by the user or programmatically. |
| play | This event occurs when the media has been started or is no longer paused. |
| playing | This event occurs when the media is paused or stopped to play after buffering. |
| popstate | This event occurs when the window's history changes. |
| progress | This event occurs when the browser is in the process of obtaining media data. |
| ratechange | This event occurs when the media playback speed changes. |
| reset | This event occurs when the form is reset. |
| resize | This event occurs when the document view is resized. |
| scroll | This event occurs when the scroll bar of the scroll element is scrolled. |
| search | This event occurs when the user types in the search field. |
| seeked | This event occurs when the user has finished moving/jumping to a new location in the media. |
| seeking | This event occurs when the user starts moving/jumping to a new location in the media. |
| select | This event occurs after the user selects text (for and |
