JavaScript events
JavaScript events, addEventListener, and event delegation
Learn JavaScript events with focused lessons on addEventListener, bubbling, capturing, event delegation, default browser actions, custom events, mouse events, pointer events, keyboard events, scrolling, focus, input, change, paste, and form submit events.
Event handling lessons and concepts
Browser event basics
Understand event objects, handlers, addEventListener, and the way browser actions enter JavaScript code.
Outcome: Attach predictable event listeners and read useful event data.
- JavaScript events
- addEventListener
- event object
Bubbling and capturing
Study event propagation so handlers run at the right stage and nested interfaces stay understandable.
Outcome: Control propagation without breaking surrounding page behavior.
- event bubbling
- event capturing
- JavaScript event propagation
Event delegation
Use one parent listener to handle many child controls, including controls created after initial render.
Outcome: Build scalable interactive lists, menus, and toolbars with fewer listeners.
- event delegation
- event target
- closest JavaScript
Default browser actions
Know when to let the browser act normally and when to prevent default behavior for custom interactions.
Outcome: Avoid accidental navigation, submit, selection, or drag behavior.
- preventDefault
- browser default action
- JavaScript event handling
Custom events
Dispatch application-specific events to connect components without hard-wiring every caller and listener.
Outcome: Model internal UI signals with explicit custom event payloads.
- CustomEvent
- dispatchEvent
- JavaScript custom events
Mouse and pointer events
Handle clicks, movement, drag and drop, pointer events, and cross-device pointer input.
Outcome: Implement mouse and pointer interactions that work across modern devices.
- mouse events JavaScript
- pointer events
- drag and drop JavaScript
Keyboard events
React to keydown and keyup events while preserving accessible keyboard behavior.
Outcome: Use keyboard input deliberately for shortcuts and interactive controls.
- keyboard events JavaScript
- keydown
- keyup
Input, focus, and form events
Handle focus, input, change, paste, and submit events for practical form workflows.
Outcome: Read and validate form input without losing browser-native behavior.
- JavaScript form events
- input event
- submit event