JavaScript Events
You are Here:
JavaScript Events
In JavaScript, an event is something that-happen in the system. For example, user clicks an element (button, link, etc.) is an event, page load is an event, hovering an element is an event, and so.
In this section, we will list all the events available in JavaScript.
Mouse Events
The following table provides a list of all Mouse Events available in JavaScript.
| Event | Explanation |
|---|---|
| onclick | Triggers when the user clicks on an element |
| oncontextmenu | Triggers when the user right-clicks on an element to open a context menu |
| ondblclick | Triggers when the user double-clicks on an element |
| onmousedown | Triggers when the user presses a mouse button over an element |
| onmouseenter | Triggers when the pointer is moved onto an element |
| onmouseleave | Triggers when the pointer is moved out of an element |
| onmousemove | Triggers when the pointer is moving while it is over an element |
| onmouseover | Triggers when the pointer is moved onto an element, or onto one of its children |
| onmouseout | Triggers when a user moves the mouse pointer out of an element, or out of one of its children |
| onmouseup | Triggers when a user releases a mouse button over an element |
| onwheel | Triggers when a user wheel/scroll a mouse |
Mouse Events Properties
The following table provides a list of all Mouse Events properties available in JavaScript.
| Property | Explanation |
|---|---|
| event.altKey | Returns whether the "ALT" key was pressed when the mouse event was fired |
| event.button | Returns which mouse button was pressed when the mouse event was fired |
| event.buttons | Returns which mouse buttons were pressed when the mouse event was fired |
| event.clientX | Returns the X coordinate of the mouse pointer relative to the current window, when the mouse event was fired |
| event.clientY | Returns the Y coordinate of the mouse pointer relative to the current window, when the mouse event was fired |
| event.ctrlKey | Returns whether the "CTRL" key was pressed when the mouse event was fired |
| event.detail | Returns a number with details about the event |
| eventelegram.dogtaKey | Returns whether the "META" key was pressed when the mouse event was fired |
| event.movementX | Returns the X coordinate of the mouse pointer relative to the position of the last mousemove event |
| event.movementY | Returns the Y coordinate of the mouse pointer relative to the position of the last mousemove event |
| event.offsetX | Returns the X coordinate of the mouse pointer relative to the position of the padding edge of the target node |
| event.offsetY | Returns the Y coordinate of the mouse pointer relative to the position of the padding edge of the target node |
| event.pageX | Returns the X coordinate of the mouse pointer relative to the whole document |
| event.pageY | Returns Y coordinate of the mouse pointer relative to the whole document |
| event.region | Returns the id of the hit region affected by the event. If no hit region is affected, null is returned |
| event.relatedTarget | Returns the secondary target for the event, if there is one. |
| event.screenX | Returns the X coordinate of the mouse pointer relative to the screen. |
| event.screenY | Returns the Y coordinate of the mouse pointer relative to the screen. |
| event.shiftKey | Returns whether the "SHIFT" key was pressed when the mouse event was fired |
Keyboard Events
The following table provides a list of all Keyboard Events available in JavaScript.
| Event | Explanation |
|---|---|
| onkeydown | Triggers when the user is pressing a key |
| onkeypress | Triggers when the user presses a key |
| onkeyup | Triggers when the user releases a key |
Keyboard Events Properties
The following table provides a list of all Keyboard Events properties available in JavaScript.
| Properties | Explanation |
|---|---|
| event.altKey | Returns whether the "ALT" key was pressed when the key event was fired |
| event.code | Returns a DOMString with the code value of the physical key represented by the event |
| event.ctrlKey | Returns whether the "CTRL" key was pressed when the key event was fired |
| event.isComposing | Returns whether the event is fired between after compositionstart and before compositionend. |
| event.key | Returns a DOMString representing the key value of the key represented by the event |
| event.location | Returns a Number representing the location of the key on the keyboard or other input device |
| eventelegram.dogtaKey | Returns whether the "META" key was pressed when the key event was fired |
| event.repeat | Returns whether a key is being hold down repeatedly or not |
| event.shiftKey | Returns whether the "SHIFT" key was pressed when the key event was fired |
Object/Frame Events
The following table provides a list of all Object/Frame Events available in JavaScript.
| Event | Explanation |
|---|---|
| onabort | Triggers when the loading of a media is aborted |
| onbeforeunload | Triggers before the document is about to be unloaded |
| onerror | Triggers when an error occurs while loading an external file |
| onfullscreenchange | Triggers when an element is displayed in fullscreen mode |
| onfullscreenerror | Triggers when an element can not be displayed in fullscreen mode |
| onhashchange | Triggers when there has been changes to the anchor part of a URL |
| onload | Triggers when an object has loaded |
| onpageshow | Triggers when the user navigates away from a webpage |
| onpagehide | Triggers when the user navigates to a webpage |
| onresize | Triggers when the document view is resized |
| onscroll | Triggers when an element's scrollbar is being scrolled |
| onunload | Triggers once a page has unloaded |
Form Events
The following table provides a list of all Form Events available in JavaScript.
| Event | Explanation |
|---|---|
| onblur | Triggers when an element loses focus |
| onchange | Triggers when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>) |
| onfocus | Triggers when an element gets focus |
| onfocusin | Triggers when an element is about to get focus |
| onfocusout | Triggers when an element is about to lose focus |
| oninput | Triggers when an element gets user input |
| oninvalid | Triggers when an element is invalid |
| onreset | Triggers when a form is reset |
| onsearch | Triggers when the user writes something in a search field (for <input="search">) |
| onselect | Triggers after the user selects some text (for <input> and <textarea>) |
| onsubmit | Triggers when a form is submitted |
Drag Events
The following table provides a list of all Drag Events available in JavaScript.
| Event | Explanation |
|---|---|
| ondrag | Triggers when an element is being dragged |
| ondragend | Triggers when the user has finished dragging an element |
| ondragenter | Triggers when the dragged element enters the drop target |
| ondragleave | Triggers when the dragged element leaves the drop target |
| ondragover | Triggers when the dragged element is over the drop target |
| ondragstart | Triggers when the user starts to drag an element |
| ondrop | Triggers when the dragged element is dropped on the drop target |
Clipboard Events
The following table provides a list of all Clipboard Events available in JavaScript.
| Event | Explanation |
|---|---|
| oncopy | Triggers when the user copies the content of an element |
| oncut | Triggers when the user cuts the content of an element |
| onpaste | Triggers when the user pastes some content in an element |
Print Events
The following table provides a list of all Print Events available in JavaScript.
| Event | Explanation |
|---|---|
| onafterprint | Triggers when a page has started printing, or if the print dialogue box has been closed |
| onbeforeprint | Triggers when a page is about to be printed |
Animation Events
The following table provides a list of all Animation Events available in JavaScript.
| Event | Explanation |
|---|---|
| onanimationstart | Triggers when a CSS animation has started |
| onanimationend | Triggers when a CSS animation has completed |
| onanimationiteration | Triggers when a CSS animation is repeated |
Animation Events Properties
The following table provides a list of all Mouse Events properties available in JavaScript.
| Property | Explanation |
|---|---|
| event.animationName | Returns the name of the animation |
| event.elapsedTime | Returns the number of seconds an animation has been running |
Media Events
The following table provides a list of all Media Events available in JavaScript.
| Event | Explanation |
|---|---|
| onabort | Triggers when the loading of an audio/video is aborted |
| oncanplay | Triggers when the browser can start playing the audio/video |
| oncanplaythrough | Triggers when the browser can play through the audio/video without stopping for buffering |
| ondurationchange | Triggers when the duration of the audio/video is changed |
| onemptied | Triggers when the current playlist is empty |
| onended | Triggers when the current playlist is ended |
| onerror | Triggers when an error occurred during the loading of an audio/video |
| onloadeddata | Triggers when the browser has loaded the current frame of the audio/video |
| onloadedmetadata | Triggers when the browser has loaded meta data for the audio/video |
| onloadstart | Triggers when the browser starts looking for the audio/video |
| onpause | Triggers when the audio/video has been paused |
| onplay | Triggers when the audio/video has been started or is no longer paused |
| onplaying | Triggers when the audio/video is playing after having been paused or stopped for buffering |
| onprogress | Triggers when the browser is downloading the audio/video |
| onratechange | Triggers when the playing speed of the audio/video is changed |
| onseeked | Triggers when a seek operation completed |
| onseeking | Triggers when a seek operation begins |
| onstalled | Triggers when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming |
| onsuspend | Triggers when the media data loading has been suspended |
| ontimeupdate | Triggers when the time indicated by the currentTime attribute has been updated |
| onvolumechange | Triggers when the volume has been changed |
| onwaiting | Triggers when the video stops because it needs to buffer the next frame |
Transition Events
The following table provides a list of all Transition Events available in JavaScript.
| Event | Explanation |
|---|---|
| ontransitionend | Triggers when a CSS transition has completed |
Transition Events Properties
The following table provides a list of all Transition Events properties available in JavaScript.
| Property | Explanation |
|---|---|
| event.persisted | Returns whether the webpage was cached by the browser |
Server Sent Events
The following table provides a list of all Server Sent Events available in JavaScript.
| Event | Explanation |
|---|---|
| onmessage | Triggers when a message is received through the event source |
| onopen | Triggers when a connection with the event source is opened |
| onerror | Triggers when an error occurs while loading an external file |
Touch Events
The following table provides a list of all Touch Events available in JavaScript.
| Event | Explanation |
|---|---|
| ontouchcancel | Triggers when the touch is interrupted |
| ontouchend | Triggers when a finger is removed from a touch screen |
| ontouchmove | Triggers when a finger is dragged across the screen |
| ontouchstart | Triggers when a finger is placed on a touch screen |
HashChangeEvent Properties
The following table provides a list of all HashChange Event properties available in JavaScript.
| Property | Explanation |
|---|---|
| event.newURL | Returns the new URL to which the window is navigating |
| event.oldURL | Returns the previous URL from which the window was navigated |
Reminder
Hi Developers, we almost covered 97% of JavaScript Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in JavaScript.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
