Event Delegation

document.querySelector('nav').addEventListener('click', e => {
  if (!e.target.matches('.nav-item')) return;
  // Handle navigation click
});

To improve performance
To prevent event bubbling
To filter events for specific target elements
The matches() check is crucial in event delegation for filtering events to ensure they originated from intended target elements. Without this check, the handler would execute for clicks on any element within the container, including the container itself. This filtering mechanism ensures precise control over which elements can trigger the handler, making the delegation pattern both efficient and accurate. The matches() method accepts any valid CSS selector, providing flexible targeting options.
To handle asynchronous events