JavaScript user input events
JavaScript mouse events, keyboard events, pointer events, drag and drop
Learn JavaScript user input events with focused lessons on mouse events, mouseover and mouseenter, drag and drop, pointer events, keyboard keydown and keyup, scrolling, bubbling, capturing, and event delegation.
Mouse, keyboard, pointer, drag, and scroll lessons
Browser event basics
Understand event objects, handlers, addEventListener, browser actions, and how user input enters JavaScript.
Outcome: Attach event handlers and read event data intentionally.
- JavaScript events
- addEventListener
- event object JavaScript
Bubbling and capturing
Follow event propagation from target to ancestors, and use capturing, bubbling, and stopPropagation deliberately.
Outcome: Predict which event handlers run and in what order.
- event bubbling JavaScript
- event capturing
- stopPropagation
Event delegation
Handle many interactive elements with one ancestor listener using event.target, closest, and delegation patterns.
Outcome: Build scalable event handling for lists, menus, and dynamic DOM.
- event delegation JavaScript
- event target
- closest JavaScript
Mouse events
Handle click, mousedown, mouseup, mousemove, coordinates, buttons, modifiers, and click sequences.
Outcome: Implement mouse interactions with correct event timing and coordinates.
- mouse events JavaScript
- JavaScript click event
- mousedown JavaScript
Mouseover, mouseout, mouseenter, and mouseleave
Compare hover-related mouse events, relatedTarget, nested elements, and non-bubbling enter/leave behavior.
Outcome: Choose the right hover event for nested UI components.
- mouseover JavaScript
- mouseenter JavaScript
- mouseout JavaScript
Drag and drop with mouse events
Build drag behavior with mousedown, mousemove, mouseup, positioning, droppable targets, and pointer capture ideas.
Outcome: Create custom drag interactions from lower-level mouse events.
- drag and drop JavaScript
- JavaScript draggable
- mouse drag JavaScript
Pointer events
Use pointer events for mouse, touch, and pen input with pointerId, pointer capture, and cross-device interaction.
Outcome: Support modern pointer input across desktop and touch devices.
- pointer events JavaScript
- pointerdown
- setPointerCapture
Keyboard events
React to keydown and keyup, read event.key and event.code, and preserve accessible keyboard behavior.
Outcome: Use keyboard input for shortcuts and interactive controls without breaking accessibility.
- keyboard events JavaScript
- keydown JavaScript
- keyup JavaScript
Scrolling
Handle scroll events, throttle expensive work, detect viewport positions, and coordinate scroll-driven UI.
Outcome: Respond to scrolling without making the page feel slow.
- scroll event JavaScript
- onscroll JavaScript
- JavaScript scrolling