JavaScript Event Handling: addEventListener and Event Delegation

Key Insights

Use addEventListener over inline handlers for cleaner separation of concerns, multiple event handlers per element, and better control over event propagation phases
Event delegation reduces memory overhead by attaching a single listener to a parent element instead of multiple listeners to children, and automatically handles dynamically added elements
Understanding event bubbling and the difference between event.target and event.currentTarget is essential for implementing effective event delegation patterns

The addEventListener Method

The addEventListener method is the modern standard for attaching event handlers to DOM elements. It takes three parameters: the event type, a callback function, and an optional configuration object or boolean for capture phase control.

const button = document.querySelector('#submit-btn');

button.addEventListener('click', function(event) {
  console.log('Button clicked!');
  console.log('Event type:', event.type);
});

Unlike inline handlers (onclick="handleClick()") or property assignment (element.onclick = handler), addEventListener allows multiple handlers on the same element without overwriting previous ones:

const button = document.querySelector('#submit-btn');

button.addEventListener('click', () => {
  console.log('First handler');
});

button.addEventListener('click', () => {
  console.log('Second handler');
});

// Both handlers execute when button is clicked

The options parameter provides fine-grained control over event behavior:

const button = document.querySelector('#submit-btn');

// Execute only once, then automatically remove
button.addEventListener('click', handleClick, { once: true });

// Use capture phase instead of bubbling
button.addEventListener('click', handleClick, { capture: true });

// Mark as passive for scroll performance optimization
document.addEventListener('scroll', handleScroll, { passive: true });

// Combine multiple options
button.addEventListener('click', handleClick, {
  once: true,
  capture: false,
  passive: false
});

The passive: true option is particularly important for scroll and touch events. It tells the browser that preventDefault() won’t be called, allowing scroll performance optimizations.

Event Object and Event Flow

Every event handler receives an event object containing information about the event. Two critical properties are event.target (the element that triggered the event) and event.currentTarget (the element the listener is attached to):

const container = document.querySelector('#container');

container.addEventListener('click', function(event) {
  console.log('Target:', event.target);           // Element clicked
  console.log('Current Target:', event.currentTarget); // #container
  console.log('Event type:', event.type);
  console.log('Timestamp:', event.timeStamp);
});

Events in the DOM follow a three-phase flow: capture (top-down), target, and bubble (bottom-up). By default, handlers execute during the bubbling phase:

<div id="outer">
  <div id="middle">
    <button id="inner">Click me</button>
  </div>
</div>

<script>
document.querySelector('#outer').addEventListener('click', () => {
  console.log('Outer div');
});

document.querySelector('#middle').addEventListener('click', () => {
  console.log('Middle div');
});

document.querySelector('#inner').addEventListener('click', () => {
  console.log('Inner button');
});

// Clicking the button logs:
// "Inner button"
// "Middle div"
// "Outer div"
</script>

Use preventDefault() to stop default browser behavior and stopPropagation() to prevent event bubbling:

const form = document.querySelector('#myForm');
const link = document.querySelector('#myLink');

// Prevent form submission
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('Form submission prevented');
  // Handle form data with JavaScript instead
});

// Prevent link navigation
link.addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Navigation prevented');
});

// Stop event from bubbling to parent elements
button.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('Event won\'t reach parent listeners');
});

Event Delegation Pattern

Event delegation leverages event bubbling to handle events efficiently. Instead of attaching listeners to multiple child elements, attach a single listener to a common parent:

// Traditional approach - inefficient for many items
const items = document.querySelectorAll('.list-item');
items.forEach(item => {
  item.addEventListener('click', (event) => {
    console.log('Item clicked:', event.target.textContent);
  });
});

// Delegation approach - single listener
const list = document.querySelector('#item-list');
list.addEventListener('click', (event) => {
  // Check if clicked element is a list item
  if (event.target.classList.contains('list-item')) {
    console.log('Item clicked:', event.target.textContent);
  }
});

Event delegation shines when handling dynamically added elements:

const todoList = document.querySelector('#todo-list');
const addButton = document.querySelector('#add-todo');

// Delegation handles both existing and future items
todoList.addEventListener('click', (event) => {
  if (event.target.classList.contains('delete-btn')) {
    event.target.closest('.todo-item').remove();
  }
  
  if (event.target.classList.contains('complete-btn')) {
    event.target.closest('.todo-item').classList.toggle('completed');
  }
});

// Add new items dynamically - no need to attach new listeners
addButton.addEventListener('click', () => {
  const newItem = document.createElement('li');
  newItem.className = 'todo-item';
  newItem.innerHTML = `
    <span>New task</span>
    <button class="complete-btn">Complete</button>
    <button class="delete-btn">Delete</button>
  `;
  todoList.appendChild(newItem);
  // Delegation automatically handles clicks on new buttons
});

Use closest() to handle events on nested elements within a delegated target:

const taskList = document.querySelector('#tasks');

taskList.addEventListener('click', (event) => {
  // Find closest parent with task-item class
  const taskItem = event.target.closest('.task-item');
  
  if (!taskItem) return; // Click wasn't on a task item
  
  if (event.target.matches('.edit-btn')) {
    editTask(taskItem);
  } else if (event.target.matches('.delete-btn')) {
    taskItem.remove();
  }
});

Practical Use Cases and Best Practices

Here’s a complete example of a dynamic todo list using event delegation:

class TodoList {
  constructor(listElement) {
    this.list = listElement;
    this.setupEventDelegation();
  }
  
  setupEventDelegation() {
    this.list.addEventListener('click', (event) => {
      const target = event.target;
      const todoItem = target.closest('.todo-item');
      
      if (!todoItem) return;
      
      if (target.matches('.toggle-complete')) {
        this.toggleComplete(todoItem);
      } else if (target.matches('.delete-todo')) {
        this.deleteTodo(todoItem);
      } else if (target.matches('.edit-todo')) {
        this.editTodo(todoItem);
      }
    });
    
    // Handle input events with delegation
    this.list.addEventListener('change', (event) => {
      if (event.target.matches('.todo-checkbox')) {
        const todoItem = event.target.closest('.todo-item');
        this.toggleComplete(todoItem);
      }
    });
  }
  
  toggleComplete(todoItem) {
    todoItem.classList.toggle('completed');
  }
  
  deleteTodo(todoItem) {
    todoItem.remove();
  }
  
  editTodo(todoItem) {
    const textSpan = todoItem.querySelector('.todo-text');
    const currentText = textSpan.textContent;
    const input = document.createElement('input');
    input.value = currentText;
    input.className = 'edit-input';
    
    textSpan.replaceWith(input);
    input.focus();
    
    input.addEventListener('blur', () => {
      const newSpan = document.createElement('span');
      newSpan.className = 'todo-text';
      newSpan.textContent = input.value;
      input.replaceWith(newSpan);
    });
  }
  
  addTodo(text) {
    const todoItem = document.createElement('li');
    todoItem.className = 'todo-item';
    todoItem.innerHTML = `
      <input type="checkbox" class="todo-checkbox">
      <span class="todo-text">${text}</span>
      <button class="edit-todo">Edit</button>
      <button class="delete-todo">Delete</button>
    `;
    this.list.appendChild(todoItem);
  }
}

const todoList = new TodoList(document.querySelector('#todo-list'));

Always remove event listeners when elements are destroyed to prevent memory leaks:

class Component {
  constructor(element) {
    this.element = element;
    this.handleClick = this.handleClick.bind(this);
    this.element.addEventListener('click', this.handleClick);
  }
  
  handleClick(event) {
    console.log('Clicked');
  }
  
  destroy() {
    // Clean up event listener
    this.element.removeEventListener('click', this.handleClick);
    this.element.remove();
  }
}

For high-frequency events like scroll and resize, implement debouncing:

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

const handleResize = debounce(() => {
  console.log('Window resized:', window.innerWidth);
}, 250);

window.addEventListener('resize', handleResize);

// For scroll events, consider passive listeners
window.addEventListener('scroll', () => {
  console.log('Scrolled to:', window.scrollY);
}, { passive: true });

When to Use Each Approach

Use direct addEventListener when:

You have a small number of static elements
You need fine-grained control over individual element behavior
The elements won’t be dynamically added or removed

Use event delegation when:

Managing many similar elements (lists, tables, grids)
Elements are added or removed dynamically
You want to minimize memory usage and improve performance
You’re working with large DOM trees

Avoid delegation when:

Events don’t bubble (focus, blur, load)
You need to prevent all bubbling for security reasons
The performance cost of checking event.target outweighs the benefits

Modern JavaScript applications benefit most from combining both approaches: use delegation for dynamic collections and direct listeners for unique, static elements. Understanding event flow and the event object properties gives you the flexibility to choose the right tool for each situation.

The addEventListener Method

Event Object and Event Flow

Event Delegation Pattern

Practical Use Cases and Best Practices

When to Use Each Approach

Liked this? There's more.