Passing Data in Custom Events

by Jacob King

JavaScript

// Create Event with Data
const dataEvt = new CustomEvent('user-logged-in', {
  detail: { userId: 123, name: 'Alice' },
  bubbles: true
});

// Dispatch Event
const btn2 = document.querySelector('#loginBtn');
btn2.addEventListener('click', () => {
  btn2.dispatchEvent(dataEvt);
});

// Listen for event to access and handle data  
document.addEventListener('user-logged-in', (e) => {
  console.log(
    'Logged in user:', e.detail.name, 
    '(ID:', e.detail.userId + ')'
  );
});