All 10 DOM & Events questions
More in DOM & Events
What does event.preventDefault() do? How do you select and modify an element's text content? What is event delegation and why is it a performance best practice? What's the difference between event.target and event.currentTarget? What's the difference between the capturing and bubbling phases of event propagation? How do you properly clean up event listeners to avoid memory leaks? What is the difference between passive and non-passive event listeners for scroll performance? How does MutationObserver let you react to DOM changes made by other code?
Advertisement
Back to results for “Design Patterns in Java”
JavaScript › DOM & Events

How do you create and dispatch a custom DOM event?

Intermediate

Answer

Construct a CustomEvent with an optional detail payload, then call dispatchEvent() on a target element; other code can listen for it exactly like a native event.
const event = new CustomEvent('itemAdded', { detail: { id: 42 } });
el.addEventListener('itemAdded', (e) => console.log(e.detail.id));
el.dispatchEvent(event); // logs 42
Real-world example Decoupling a cart component from a header badge by having them communicate via a custom 'cartUpdated' event.

Common follow-ups: Does a custom event bubble by default?

Design Patterns in JavaScript
All 10 DOM & Events questions