No Login Data Private Local Save

Custom Event Dispatcher Demo - Online Send & Listen

21
0
0
0

Custom Event Dispatcher

Create, dispatch, and listen to JavaScript CustomEvent in real-time. Understand event bubbling, detail passing, and listener management.

0
Events Dispatched
0
Active Listeners
0
Bubbled Events
0
Log Entries
Event Configuration
Presets:
Valid JSON object or leave empty. Invalid JSON will be wrapped as string.
Event Target Visualization

Click the target or use dispatch buttons. Watch bubbling propagate to the document zone.

document (bubbling zone)
Target click me
Listeners
No listeners registered yet.
Add one above to get started.
Event Log
No events yet. Dispatch an event to see logs.
Frequently Asked Questions

A CustomEvent is a JavaScript interface that allows developers to create and dispatch their own named events with custom data. Unlike built-in events (click, keydown), custom events carry application-specific information in the detail property. They enable loose coupling between components—perfect for micro-frontends, plugin systems, and modular architectures.

Use the new CustomEvent(eventName, options) constructor and element.dispatchEvent(). Example:
const event = new CustomEvent('user:login', {
  detail: { username: 'john' },
  bubbles: true,
  cancelable: false
});
document.querySelector('#app').dispatchEvent(event);

Event is the base class for all DOM events and does not include a detail property. CustomEvent extends Event and adds the detail field for passing arbitrary data. If you need to send data with your event, always use CustomEvent. For simple signals without data, new Event('my-event') works fine.

When bubbles: true is set, the custom event propagates upward through the DOM tree—from the target element to its parent, then grandparent, all the way to document and window. Listeners on ancestor elements can catch the event as it bubbles up. If bubbles: false, only listeners directly on the target element are notified. Use bubbling to implement delegation patterns.

  • Component communication: Notify parent components of state changes without direct coupling.
  • Plugin hooks: Expose lifecycle hooks (e.g., plugin:beforeInit, plugin:afterRender).
  • State management: Broadcast state updates across modules (lightweight alternative to Redux for small apps).
  • Analytics tracking: Fire track:event with payload data for analytics systems.
  • Form workflows: Signal form validation results or multi-step form progression.
  • Real-time notifications: Push notification-like behavior within single-page applications.

Use removeEventListener() with the exact same function reference used in addEventListener(). Anonymous arrow functions cannot be removed unless stored in a variable. Best practice: store handler references or use { once: true } for one-time listeners. Example:
const handler = (e) => console.log(e.detail);
element.addEventListener('user:login', handler);
// Later:
element.removeEventListener('user:login', handler);

Yes! Custom Events are native DOM APIs and work universally across vanilla JavaScript, React, Vue, Angular, Svelte, and any framework that runs in the browser. In React, you can listen on a ref's DOM element with useEffect. In Vue, you can use template refs or addEventListener in mounted(). This makes Custom Events an excellent bridge for cross-framework micro-frontend communication without shared dependencies.
🔧 Related Tools