1. Historical Evolution vs Modern addEventListener

Historically in early JavaScript, events were wired directly as inline HTML attributes (onclick="...") or via DOM properties (element.onclick = fn). These legacy models suffered fatal architectural defects: only a single handler could be assigned at a time (subsequent assignments silently wiped previous handlers), and markup was tightly coupled to logic.

const btn = document.querySelector('button');

btn.onclick = () => console.log('Handler 1');
// ❌ OVERWRITES Handler 1 completely!
btn.onclick = () => console.log('Handler 2');

const btn = document.querySelector('button');

// ✅ Both callbacks execute sequentially!
btn.addEventListener('click', () => console.log('1'));
btn.addEventListener('click', () => console.log('2'));

// element.addEventListener(type, listener, [options])
btn.addEventListener('click', handleClick, {
  capture: false, // run in bubble phase (default)
  once: true,     // automatically self-removes after the 1st invocation
  passive: true,  // guarantees never calling preventDefault() (vital for 60fps scrolling)
  signal: abortController.signal // enables instantaneous bulk removal via AbortSignal
});

// To remove an existing listener:
// Function reference MUST match identical pointer (anonymous functions CANNOT be removed!)
btn.removeEventListener('click', handleClick);

2. The Event Object: e.target vs e.currentTarget

Every event handler automatically receives an Event object holding contextual metadata about the event. The most critical distinction in senior frontend engineering is between target and currentTarget.

Click the center button below to witness how the event traverses down through the Capturing Phase, strikes the Target, and surges back up through the Bubbling Phase in real time.

3. High-Performance Event Delegation Pattern

Imagine an eCommerce catalog with 1,000 product cards, each with an "Add to Cart" button. Attaching 1,000 separate addEventListener callbacks consumes substantial memory, slows page initialization, and breaks whenever new cards are asynchronously loaded via infinite scroll.

const catalog = document.querySelector('#product-catalog');

catalog.addEventListener('click', (e) => {
  // Finds the closest button matching the selector even if user clicks an SVG icon inside it!
  const addBtn = e.target.closest('.btn-add-to-cart');
  
  if (!addBtn || !catalog.contains(addBtn)) return; // Guard clause
  
  const productId = addBtn.dataset.productId;
  console.log(`Successfully added product #${productId} to cart!`);
});

4. Custom Events & Decoupled Architecture

Modern JavaScript allows you to build custom event-driven architectures using new CustomEvent() and dispatchEvent(). This allows isolated components (like an authentication widget and a cart badge) to communicate without direct coupling.

// 1. Dispatching a custom event with rich payload
const userLoginEvent = new CustomEvent('auth:login', {
  detail: {
    userId: 'usr_8829',
    username: 'alex_dev',
    role: 'administrator'
  },
  bubbles: true,   // allows event to bubble through DOM
  cancelable: true // allows listeners to call e.preventDefault()
});

document.dispatchEvent(userLoginEvent);

// 2. Subscribing in another decoupled component
document.addEventListener('auth:login', (e) => {
  const { username, role } = e.detail;
  console.log(`Welcome back, ${username}! Role: ${role}`);
  updateNavigationProfile(username);
});