A comprehensive overview of JavaScript event types categorized by functionality. This guide covers mouse, keyboard, form, drag & drop, window, media, touch, focus, animation, transition, selection, page visibility, mutation, media query, and other commonly used events. Ideal for developers needing a quick reference for event handling in web applications.
Mouse Events
- onclick: Executes when an element is clicked.
- ondblclick: Executes when an element is double-clicked.
- onmouseover: Executes when the mouse pointer hovers over an element.
- onmouseout: Executes when the mouse pointer leaves an element.
- onmousedown: Executes when a mouse button is pressed on an element.
- onmouseup: Executes when a mouse button is released over an element.
- onmousemove: Executes when the mouse moves within an element.
Keyboard Events
- onkeydown: Executes when a key is pressed down.
- onkeypress: Executes when a key is pressed (deprecated, use onkeydown instead).
- onkeyup: Executes when a key is released.
Form Events
- onfocus: Executes when an element (like input) gains focus.
- onblur: Executes when an element loses focus.
- onchange: Executes when the value of an input, select, or textarea changes.
- oninput: Executes every time the user types into an input field.
- onsubmit: Executes when a form is submitted.
- onreset: Executes when a form is reset.
- oninvalid: Executes when a form field fails validation.
Drag and Drop Events
- ondragstart – Fires when an element starts being dragged.
- ondrag – Fires continuously while the element is being dragged.
- ondragend – Fires when the drag operation ends.
- ondrop – Fires when a dragged element is dropped onto a target.
- ondragover – Fires when a dragged element is over a valid drop target.
Window Events
- onload – Executes when the entire web page (including all images and scripts) finishes loading.
- onresize – Executes when the browser window is resized.
- onscroll – Executes when the user scrolls the webpage.
- onunload – Executes when the user leaves the page or closes the tab.
- onbeforeunload – Executes just before the user leaves the page; often used to show a confirmation dialog.
Media Events
- onplay: Executes when media (audio or video) starts playing.
- onpause: Executes when media is paused.
- onended: Executes when media playback ends.
Touch Events (For Mobile Devices) - ontouchstart: Executes when a touch point is placed on the touch surface.
- ontouchmove: Executes when a touch point is moved across the touch surface.
- ontouchend: Executes when a touch point is removed from the touch surface.
- ontouchcancel: Executes when a touch gesture is disrupted (e.g., by switching apps).
Focus Events (other than onfocus and onblur) - onfocusin: Similar to onfocus, but it bubbles up from the element, allowing for event delegation.
- onfocusout: Similar to onblur, but it bubbles up from the element.
Touch Events (For Mobile Devices)
- ontouchstart: Executes when a touch point is placed on the touch surface.
- ontouchmove: Executes when a touch point is moved across the touch surface.
- ontouchend: Executes when a touch point is removed from the touch surface.
- ontouchcancel: Executes when a touch gesture is disrupted (e.g., by switching apps).
Focus Events (other than onfocus and onblur) - onfocusin: Similar to onfocus, but it bubbles up from the element, allowing for event delegation.
- onfocusout: Similar to onblur, but it bubbles up from the element.
Animation Events
- onanimationstart: Executes when a CSS animation starts.
- onanimationend: Executes when a CSS animation ends.
- onanimationiteration: Executes when a CSS animation iteration completes.
Transition Events - ontransitionstart: Executes when a CSS transition starts.
- ontransitionend: Executes when a CSS transition ends.
- ontransitioncancel: Executes when a CSS transition is canceled.
Selection Events - onselect: Executes when the user selects text within an input or textarea element.
- onselectionchange: Executes when the selection in a document changes (e.g., text selection).
Page Visibility Events
- onvisibilitychange: Executes when the visibility state of the page changes (e.g., when the user switches tabs).
- document.hidden: A property to check the visibility of the page (true if the page is hidden).
Mutation Events (for detecting changes in DOM) - onDOMSubtreeModified: Executes when any part of the
DOM is modified. - onDOMNodeInserted: Executes when a new node is inserted into the DOM.
- on DOMNodeRemoved: Executes when a node is removed from the DOM.
Media Query Events (for responsive design) - matchMedia: Not an event per se, but a method that can be
used to detect when a media query matches or changes. You can attach a listener to trigger a callback when a specific media query matches.
Other Common Events
- addEventListener: Adds an event listener to an element that listens for specific events.
- removeEventListener: Removes an event listener from an element.
- onerror: Executes when an error occurs, such as a failed image load.
- oncontextmenu: Executes when the user right-clicks on an element to open the context menu.
Conclusion :- JavaScript events help you make web pages interactive. By knowing when and how different events happen—like clicks, typing, or form changes—you can respond to user actions and improve the user experience. This guide gives you a quick look at the most common events you’ll use when building websites.
Join Our Telegram Group (1.9 Lakhs + members):- Click Here To Join
For Experience Job Updates Follow – FLM Pro Network – Instagram Page
For All types of Job Updates (B.Tech, Degree, Walk in, Internships, Govt Jobs & Core Jobs) Follow – Frontlinesmedia JobUpdates – Instagram Page
For Healthcare Domain Related Jobs Follow – Frontlines Healthcare – Instagram Page
For Major Job Updates & Other Info Follow – Frontlinesmedia – Instagram Page