JavaScript provides a wide variety of events that can be used to create interactive web applications. Events can be grouped into categories like mouse, keyboard, form, window, clipboard, media, drag & drop, animation, and more.
| Category | Event | Description |
|---|---|---|
| Mouse | click | When the element is clicked |
| dblclick | When the element is double-clicked | |
| mousedown | When the mouse button is pressed | |
| mouseup | When the mouse button is released | |
| mousemove | When the mouse is moved | |
| mouseover | When the pointer enters an element | |
| mouseout | When the pointer leaves an element | |
| contextmenu | When the right mouse button is clicked | |
| Keyboard | keydown | When a key is pressed |
| keyup | When a key is released | |
| keypress | When a key is pressed and released (deprecated) | |
| Form | submit | When a form is submitted |
| change | When an element value changes | |
| input | When input changes in real-time | |
| focus | When the element gets focus | |
| blur | When the element loses focus | |
| reset | When the form is reset | |
| Clipboard | copy | Triggered when copying content |
| cut | Triggered when cutting content | |
| paste | Triggered when pasting content | |
| Drag & Drop | drag | Element is being dragged |
| dragstart | Drag starts | |
| dragend | Drag ends | |
| dragover | Element is dragged over a drop target | |
| dragenter | Dragged element enters a drop zone | |
| dragleave | Dragged element leaves a drop zone | |
| Media | play | Media starts playing |
| pause | Media is paused | |
| ended | Media playback ends | |
| volumechange | Volume is changed | |
| timeupdate | Playback position has changed | |
| Window | load | When the page is fully loaded |
| unload | When the user leaves the page | |
| resize | When the window is resized | |
| scroll | When the user scrolls the document | |
| beforeunload | When about to leave the page (confirmation) | |
| Touch | touchstart | Finger touches screen |
| touchmove | Finger is dragged on screen | |
| touchend | Finger is removed from screen | |
| Pointer | pointerdown | Pointer is pressed |
| pointerup | Pointer is released | |
| pointermove | Pointer moves over element | |
| Animation | animationstart | CSS animation starts |
| animationend | CSS animation ends | |
| animationiteration | Animation repeats | |
| Transition | transitionstart | CSS transition starts |
| transitionend | CSS transition ends | |
| Miscellaneous | error | Script or resource fails to load |
| wheel | Mouse wheel is scrolled |
Events allow developers to interact with users in real-time. Knowing these events helps you build powerful, interactive user interfaces across devices and platforms.