Are you familiar with the concept of event delegation? Can the solution be rewritten using delegation?

Event delegation is a technique where the event handler is attached not to each individual element, but to their common parent. This allows reducing the number of handlers and effectively managing dynamically added elements.

For example, instead of attaching a handler to each button in a list, you can attach a single handler to the container and check inside it which element the event occurred on:

const container = document.getElementById('list');
container.addEventListener('click', function(event) {
  if (event.target && event.target.matches('button.item-button')) {
    console.log('Button clicked:', event.target.textContent);
  }
});

Thus, a solution with multiple handlers can be rewritten using delegation, which improves performance and simplifies code maintenance.