DOM

How to Handle DOM Events

Use addEventListener() for event handling

Quick Answer (2024 ES6+ Way)

javascript

const button = document.querySelector('button');
button.addEventListener('click', (event) => {
  console.log('Button clicked!', event);
});

Live Example

javascript

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // Prevent default form submission
  
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);
  
  console.log('Form data:', data);
});

// Multiple events
const input = document.querySelector('input');
['focus', 'blur', 'input'].forEach(eventType => {
  input.addEventListener(eventType, (e) => {
    console.log(`${eventType} event`);
  });
});

Common Variations

Remove Listener

javascript

function handler(e) { console.log(e); }
element.addEventListener('click', handler);
element.removeEventListener('click', handler);

Event Delegation

javascript

parent.addEventListener('click', (e) => {
  if (e.target.matches('.child-class')) {
    // Handle child click
  }
});

❌ Don't Do This (Outdated Way)

Avoid inline event handlers

javascript

// DON'T DO THIS
<button onclick="handleClick()">Click</button>

Browser Support

✓ Works in all modern browsers (IE9+)

#dom#events#listener