Как называется подход когда через current смотрится где сработал обработчик?

Event Delegation и event.currentTarget

Event Delegation — это паттерн обработки событий, при котором вместо навешивания обработчиков на каждый элемент, ты навешиваешь один обработчик на родителя и используешь event.currentTarget для определения, где именно произошло событие.

Чем отличаются event.target и event.currentTarget?

• event.target — элемент, на котором событие произошло (самый глубокий элемент в DOM)
• event.currentTarget — элемент, на котором висит обработчик (на котором мы слушаем событие)

Практический пример

// ❌ Плохо — обработчик на каждый элемент
const buttons = document.querySelectorAll("button");
buttons.forEach(btn => {
  btn.addEventListener("click", () => {
    console.log("Button clicked!");
  });
});

// ✅ Хорошо — Event Delegation
const container = document.getElementById("button-container");
container.addEventListener("click", (event) => {
  if (event.target.tagName === "BUTTON") {
    console.log("Button clicked:", event.target.textContent);
  }
});

Разница между target и currentTarget

const parent = document.getElementById("parent");

parent.addEventListener("click", (event) => {
  console.log("target:", event.target);        // <span> — где кликнули
  console.log("currentTarget:", event.currentTarget); // <div id="parent">
});

Преимущества Event Delegation

1. Производительность — один обработчик вместо множества. Это особенно важно при большом количестве элементов (список из 1000 товаров)
2. Динамические элементы — когда ты добавляешь новые элементы в DOM, они автоматически обрабатываются существующим обработчиком
3. Меньше памяти — функции не дублируются для каждого элемента
4. Управление жизненным циклом — проще удалить один обработчик, чем много

Практический сценарий — удаление из списка

const todoList = document.getElementById("todo-list");

todoList.addEventListener("click", (event) => {
  const deleteBtn = event.target.closest(".delete-btn");
  
  if (deleteBtn) {
    const todoItem = deleteBtn.closest("li");
    const id = todoItem.dataset.id;
    
    fetch(`/api/todos/${id}`, { method: "DELETE" })
      .then(() => todoItem.remove())
      .catch(err => console.error(err));
  }
});

В React — встроено из коробки

React использует Event Delegation автоматически! Все обработчики делегируются на root элемент, поэтому не нужно думать об этом:

function TodoList() {
  const handleDelete = (id) => {
    // удаляем todo
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={() => handleDelete(todo.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

Когда НЕ использовать

• События focus, blur (не всплывают)
• mouseenter, mouseleave (не всплывают)
• Когда нужна высокая точность обработки конкретных элементов

Event Delegation — мощный паттерн для оптимизации производительности и упрощения управления событиями в больших приложениях.