Posted By
Bajarangi soft ,
Posted On 28-09-2020
HTML DOM Events
HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.
Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).
| Event | Description | Belongs To |
|---|---|---|
| abort | The event occurs when the loading of a media is aborted | UiEvent, Event |
| afterprint | The event occurs when a page has started printing, or if the print dialogue box has been closed | Event |
| animationend | The event occurs when a CSS animation has completed | AnimationEvent |
| animationiteration | The event occurs when a CSS animation is repeated | AnimationEvent |
| animationstart | The event occurs when a CSS animation has started | AnimationEvent |
| beforeprint | The event occurs when a page is about to be printed | Event |
| beforeunload | The event occurs before the document is about to be unloaded | UiEvent, Event |
| blur | The event occurs when an element loses focus | FocusEvent |
| canplay | The event occurs when the browser can start playing the media (when it has buffered enough to begin) | Event |
| canplaythrough | The event occurs when the browser can play through the media without stopping for buffering | Event |
| change | The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>) | Event |
| click | The event occurs when the user clicks on an element | MouseEvent |
| contextmenu | The event occurs when the user right-clicks on an element to open a context menu | MouseEvent |
| copy | The event occurs when the user copies the content of an element | ClipboardEvent |
| cut | The event occurs when the user cuts the content of an element | ClipboardEvent |
| dblclick | The event occurs when the user double-clicks on an element | MouseEvent |
| drag | The event occurs when an element is being dragged | DragEvent |
| dragend | The event occurs when the user has finished dragging an element | DragEvent |
| dragenter | The event occurs when the dragged element enters the drop target | DragEvent |
| dragleave | The event occurs when the dragged element leaves the drop target | DragEvent |
| dragover | The event occurs when the dragged element is over the drop target | DragEvent |
| dragstart | The event occurs when the user starts to drag an element | DragEvent |
| drop | The event occurs when the dragged element is dropped on the drop target | DragEvent |
| durationchange | The event occurs when the duration of the media is changed | Event |
| ended | The event occurs when the media has reach the end (useful for messages like "thanks for listening") | Event |
| error | The event occurs when an error occurs while loading an external file | ProgressEvent, UiEvent, Event |
| focus | The event occurs when an element gets focus | FocusEvent |
| focusin | The event occurs when an element is about to get focus | FocusEvent |
| focusout | The event occurs when an element is about to lose focus | FocusEvent |
| fullscreenchange | The event occurs when an element is displayed in fullscreen mode | Event |
| fullscreenerror | The event occurs when an element can not be displayed in fullscreen mode | Event |
| hashchange | The event occurs when there has been changes to the anchor part of a URL | HashChangeEvent |
| input | The event occurs when an element gets user input | InputEvent, Event |
| invalid | The event occurs when an element is invalid | Event |
| keydown | The event occurs when the user is pressing a key | KeyboardEvent |
| keypress | The event occurs when the user presses a key | KeyboardEvent |
| keyup | The event occurs when the user releases a key | KeyboardEvent |
| load | The event occurs when an object has loaded | UiEvent, Event |
| loadeddata | The event occurs when media data is loaded | Event |
| loadedmetadata | The event occurs when meta data (like dimensions and duration) are loaded | Event |
| loadstart | The event occurs when the browser starts looking for the specified media | ProgressEvent |
| message | The event occurs when a message is received through the event source | Event |
| mousedown | The event occurs when the user presses a mouse button over an element | MouseEvent |
| mouseenter | The event occurs when the pointer is moved onto an element | MouseEvent |
| mouseleave | The event occurs when the pointer is moved out of an element | MouseEvent |
| mousemove | The event occurs when the pointer is moving while it is over an element | MouseEvent |
| mouseover | The event occurs when the pointer is moved onto an element, or onto one of its children | MouseEvent |
| mouseout | The event occurs when a user moves the mouse pointer out of an element, or out of one of its children | MouseEvent |
| mouseup | The event occurs when a user releases a mouse button over an element | MouseEvent |
| mousewheel | Deprecated. Use the wheel event instead | WheelEvent |
| offline | The event occurs when the browser starts to work offline | Event |
| online | The event occurs when the browser starts to work online | Event |
| open | The event occurs when a connection with the event source is opened | Event |
| pagehide | The event occurs when the user navigates away from a webpage | PageTransitionEvent |
| pageshow | The event occurs when the user navigates to a webpage | PageTransitionEvent |
| paste | The event occurs when the user pastes some content in an element | ClipboardEvent |
| pause | The event occurs when the media is paused either by the user or programmatically | Event |
| play | The event occurs when the media has been started or is no longer paused | Event |
| playing | The event occurs when the media is playing after having been paused or stopped for buffering | Event |
| popstate | The event occurs when the window's history changes | PopStateEvent |
| progress | The event occurs when the browser is in the process of getting the media data (downloading the media) | Event |
| ratechange | The event occurs when the playing speed of the media is changed | Event |
| resize | The event occurs when the document view is resized | UiEvent, Event |
| reset | The event occurs when a form is reset | Event |
| scroll | The event occurs when an element's scrollbar is being scrolled | UiEvent, Event |
| search | The event occurs when the user writes something in a search field (for <input="search">) | Event |
| seeked | The event occurs when the user is finished moving/skipping to a new position in the media | Event |
| seeking | The event occurs when the user starts moving/skipping to a new position in the media | Event |
| select | The event occurs after the user selects some text (for <input> and <textarea>) | UiEvent, Event |
| show | The event occurs when a <menu> element is shown as a context menu | Event |
| stalled | The event occurs when the browser is trying to get media data, but data is not available | Event |
| storage | The event occurs when a Web Storage area is updated | StorageEvent |
| submit | The event occurs when a form is submitted | Event |
| suspend | The event occurs when the browser is intentionally not getting media data | Event |
| timeupdate | The event occurs when the playing position has changed (like when the user fast forwards to a different point in the media) | Event |
| toggle | The event occurs when the user opens or closes the <details> element | Event |
| touchcancel | The event occurs when the touch is interrupted | TouchEvent |
| touchend | The event occurs when a finger is removed from a touch screen | TouchEvent |
| touchmove | The event occurs when a finger is dragged across the screen | TouchEvent |
| touchstart | The event occurs when a finger is placed on a touch screen | TouchEvent |
| transitionend | The event occurs when a CSS transition has completed | TransitionEvent |
| unload | The event occurs once a page has unloaded (for <body>) | UiEvent, Event |
| volumechange | The event occurs when the volume of the media has changed (includes setting the volume to "mute") | Event |
| waiting | The event occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data) | Event |
| wheel | The event occurs when the mouse wheel rolls up or down over an element | WheelEvent |
Example(1)
<body onafterprint="myFunction()">
<script>
function myFunction() {
alert("This document is now being printed");
}
</script>
<button onclick="myFunction(event)">Click me!</button>
<p>Time since this document was loaded: <span id="demo"></span></p>
<script>
function myFunction(event) {
var n = event.timeStamp;
document.getElementById("demo").innerHTML = n;
}
</script>
<input type="text" onkeydown="isKeyPressed(event)">
<p id="demo"></p>
<script>
function isKeyPressed(event) {
var x = document.getElementById("demo");
if (event.shiftKey) {
x.innerHTML = "The SHIFT key was pressed!";
} else {
x.innerHTML = "The SHIFT key was NOT pressed!";
}
}
</script>
<button onclick="changePart()">Try it</button>
<p id="demo"></p>
<script>
// Using the location.hash property to change the anchor part
function changePart() {
location.hash = "part5";
}
function myFunction() {
document.getElementById("demo").innerHTML = "Previous URL: " + event.oldURL
+ "<br>New URL: " + event.newURL;
}
</script>
<body onmousedown="isKeyPressed(event)">
<script>
function isKeyPressed(event) {
if (event.metaKey) {
alert("The META key was pressed!");
} else {
alert("The META key was NOT pressed!");
}
}
</script>