Event Handling

Events are actions that happen in the browser.

Adding Event Listeners

const button = document.querySelector('#myButton');
// addEventListener (recommended)
button.addEventListener('click', (event) => {
  console.log('Button clicked!', event);
});
// With options
button.addEventListener('click', handler, {
  once: true,      // Remove after first call
  capture: false,  // Bubbling phase
  passive: true    // Won't call preventDefault()
});

Common Events

// Mouse events
element.addEventListener('click', handler);
element.addEventListener('dblclick', handler);
element.addEventListener('mouseenter', handler);
element.addEventListener('mouseleave', handler);
// Keyboard events
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    console.log('Enter pressed');
  }
});
// Form events
form.addEventListener('submit', (e) => {
  e.preventDefault();
  // Handle form submission
});
input.addEventListener('input', (e) => {
  console.log(e.target.value);
});

Event Object

element.addEventListener('click', (event) => {
  event.target;          // Element that triggered event
  event.currentTarget;   // Element with listener
  event.type;            // Event type ('click')
  event.preventDefault(); // Prevent default action
  event.stopPropagation(); // Stop bubbling
});

Event Delegation

// Instead of adding listeners to each item
const list = document.querySelector('#list');
list.addEventListener('click', (e) => {
  if (e.target.matches('li')) {
    console.log('Item clicked:', e.target.textContent);
  }
});

Custom Events

// Create custom event
const event = new CustomEvent('userLoggedIn', {
  detail: { userId: 123, username: 'john' }
});
// Dispatch event
element.dispatchEvent(event);
// Listen for custom event
element.addEventListener('userLoggedIn', (e) => {
  console.log('User:', e.detail.username);
});