Подробная и понятная статья, способная закрыть пробелы знаний в области делегирования событий в JS (либо освежить в памяти). Тезисно:
- Описан механизм всплытия событий, и три их фазы: захвата, цели и всплытия, что лежит в основе делегирования.
- Делегирование улучшает производительность, упрощает поддержку кода и корректно работает с динамически создаваемыми элементами.
- Описаны частые ошибки: путаница между
event.target и event.currentTarget, некорректное использование stopPropagation().- Рассмотрены нюансы работы событий в Shadow DOM, а также события, которые не всплывают (focus, blur, mouseenter, mouseleave), и способы их обработки.
- Приведены примеры реализации делегирования во фреймворках: React (синтетические события), Vue, Svelte и Angular.
Статья: https://habr.com/ru/companies/timeweb/articles/940722/