Всплытие событий позволяет реализовать один из самых важных приёмов разработки - делегирование.
Он заключается в том, что если у нас есть много элементов, события на которых нужно обрабатывать похожим образом, то вместо того, чтобы назначать обработчик каждому - мы ставим один обработчик на их общего предка. Из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.
Алгоритм:
- Вешаем обработчик на контейнер.
- В обработчике: получаем event.target.
- В обработчике: если event.target или один из его родителей в контейнере (this) – интересующий нас элемент – обрабатываем его.
Зачем использовать:
- Упрощает инициализацию и экономит память: не нужно вешать много обработчиков.
- Меньше кода: при добавлении и удалении элементов не нужно ставить или снимать обработчики.
- Удобство изменений: можно массово добавлять или удалять элементы путём изменения innerHTML.