Делегирование — один из важных приёмов разработки и уж точно самый полезный при работе с DOM. При этом подходе слушатель событий прикрепляется к родительскому элементу, а не к прослушиваемому, а в функции обратного вызова убираются любые события, происходящие с элементами, которые не нужны.
Такой приём в основном используют, если есть много элементов, на которых нужно отработать события похожим образом. Делегирование позволяет ставить один обработчик на общего предка и это очень облегчает работу. А ещё из него можно получить целевой элемент event.target, понять на каком потомке произошло событие и обработать его.
А также делегирование ⬇️
▪️ экономит память и упрощает процесс инициализации;
▪️ позволяет писать меньше кода, т.к. при добавлении и удалении элементов не нужно ставить или снимать обработчики;
▪️ упрощает процесс изменений DOM, при этом можно массово добавлять или удалять элементы путём изменения innerHTML и ему подобных;
▪️ повышает отзывчивость и производительность приложения, т.к. если подключить большое количество событий внутри DOM на одной странице, она станет неотзывчивой и замедлит работу всего приложения.
При делегировании событий используются две часто пропускаемые функции событий JavaScript: всплывающее окно события и целевой элемент.
Для реализации делегирования нужно выполнить следующие действия:
🔹️определить родителя элементов, вызывающих событие;
🔹️зарегистрировать на нем обработчик;
🔹️использовать event.target для определения целевого элемента
Конечно, этот метод создаёт дополнительную нагрузку на браузер, но обычно не настолько чтобы принимать её во внимание.
#methed_про_ит