Custom Events in JavaScript
From the DOM Manipulation cheat sheet · Events - Advanced · verified Jul 2026
Custom Events
Create and dispatch custom events for component communication
javascript
// Create custom event
const event = new CustomEvent('user-login', {
detail: { userId: 123, username: 'john' },
bubbles: true
})
// Dispatch event
element.dispatchEvent(event)
// Listen for custom event
element.addEventListener('user-login', (event) => {
console.log('User logged in:', event.detail)
})💡 CustomEvent can carry data in detail property
📌 Namespace events to avoid conflicts
⚡ Use bubbles: true for component communication
✅ Document can serve as a global event bus