List of JavaScript Event Handlers
This article is a complementary resource to the JavaScript in Browser course.
List of JavaScript Event Handlers
In JavaScript, an event is a signal that indicates something has happened in the system you are programming, such as a user action or a browser action.
They allow you to execute code in response to user or browser interactions with HTML elements.
Proper use of events will allow you to build highly interactive web applications.
In this article, you'll get a brief summary of mouse, pointer, and keyboard events, when to use them, and how they can enhance user experience.
Mouse Events
| Event | Description | Example Uses |
|---|---|---|
dblclick |
Fires when the user double-clicks an element. | Double-click to edit text. |
mousedown |
Fires when a mouse button is pressed down. | Start a drag operation. |
mouseup |
Fires when a mouse button is released. | Stop a drag operation. |
mousemove |
Fires when the mouse moves over an element. | Track mouse position. |
mouseenter |
Fires when the mouse enters an element (does not bubble). | Show/hide tooltips. |
mouseleave |
Fires when the mouse leaves an element (does not bubble). | Hide tooltips. |
mouseover |
Similar to mouseenter but bubbles up. |
Nested hover effects. |
mouseout |
Similar to mouseleave but bubbles up. |
Nested hover effects. |
contextmenu |
Fires when the user right-clicks an element. | Custom right-click menu. |
Pointer Events
Pointer events were introduced to unify touch, pen, and mouse events into a single API.
| Event | Description | Equivalent Mouse Event |
|---|---|---|
pointerdown |
Fires when a pointer (mouse, stylus, or touch) is pressed down. | mousedown |
pointerup |
Fires when the pointer is released. | mouseup |
pointermove |
Fires when the pointer moves. | mousemove |
pointerenter |
When the pointer enters an element (does not bubble). | mouseenter |
pointerleave |
When the pointer leaves an element (does not bubble). | mouseleave |
pointerover |
When the pointer enters an element (bubbles). | mouseout |
pointerout |
When the pointer leaves an element (bubbles). | mouseout |
pointercancel |
Fires when an ongoing pointer event is canceled (e.g., switching tabs). | No equivalent |
Keyboard Events
| Event | Description | Example Uses |
|---|---|---|
keydown |
Fires when a key is pressed down. | Detect key combos (eg: Ctrl + S) |
keyup |
Fires when a key is released. | Typing games, real-time validation |