Обложка канала

Библиотека фронтендера

Полезные материалы по всему, что может быть интересно frontend-разработчику.

Библиотека фронтендера

3 года назад
Открыть в
❓💭 Объясните делегирование событий в JavaScript Делегирование событий — прием, который состоит в добавлении обработчиков событий к родительскому элементу, а не к дочерним. Обработчик будет срабатывать всякий раз, когда событие будет запущено на дочерних элементах благодаря всплытию событий в DOM. Преимущества этой техники очевидны: ➕Экономит объем используемой памяти, ведь для родительского элемента требуется только один обработчик. ➕Не требуется привязывать или убирать обработчики при добавлении и удалении элементов. 📌 А теперь пример 1️⃣ Самый простой пример: у вас есть HTML-страница, на которой расположена таблица с несколькими ячейками; ваша задача — реализовать подсветку ячейки при клике. Вместо того, чтобы назначать обработчик onclick для каждой ячейки — можно повесить один обработчик на элемент. Он будет использовать event.target, чтобы получить элемент, на котором произошло событие, и подсветить его. В данном случае нет никакой разницы, сколько ячеек в таблице. 2️⃣ У делегирования есть и другое применение — действия в разметке. Например, вам требуется сделать меню с разными кнопками, а также у вас есть объект с соответствующими методами. Как их состыковать? Вы можете добавить один обработчик для всего меню и атрибуты data-action для каждой кнопки в соответствии с методами, которые они вызывают. 3️⃣ Делегирование событий можно использовать для добавления элементам «поведения», декларативно задавая обработчики установкой специальных HTML-атрибутов и классов. Приём проектирования «поведение» состоит из двух частей: ▫️Элементу ставится пользовательский атрибут, описывающий его поведение. ▫️При помощи делегирования ставится обработчик на документ, который ловит все клики (или другие события) и, если элемент имеет нужный атрибут, производит соответствующее действие. #вопросы_с_собесов #easy