❓💭 Объясните делегирование событий в JavaScript

Делегирование событий — прием, который состоит в добавлении обработчиков событий к родительскому элементу, а не к дочерним. Обработчик будет срабатывать всякий раз, когда событие будет запущено на дочерних элементах благодаря всплытию событий в DOM. Преимущества этой техники очевидны:

➕Экономит объем используемой памяти, ведь для родительского элемента требуется только один обработчик.
➕Не требуется привязывать или убирать обработчики при добавлении и удалении элементов.

📌 А теперь пример

1️⃣ Самый простой пример: у вас есть HTML-страница, на которой расположена таблица с несколькими ячейками; ваша задача — реализовать подсветку ячейки при клике.

Вместо того, чтобы назначать обработчик onclick для каждой ячейки — можно повесить один обработчик на элемент. Он будет использовать event.target, чтобы получить элемент, на котором произошло событие, и подсветить его. В данном случае нет никакой разницы, сколько ячеек в таблице.

2️⃣ У делегирования есть и другое применение — действия в разметке. Например, вам требуется сделать меню с разными кнопками, а также у вас есть объект с соответствующими методами. Как их состыковать?

Вы можете добавить один обработчик для всего меню и атрибуты data-action для каждой кнопки в соответствии с методами, которые они вызывают.

3️⃣ Делегирование событий можно использовать для добавления элементам «поведения», декларативно задавая обработчики установкой специальных HTML-атрибутов и классов.

Приём проектирования «поведение» состоит из двух частей:
▫️Элементу ставится пользовательский атрибут, описывающий его поведение.
▫️При помощи делегирования ставится обработчик на документ, который ловит все клики (или другие события) и, если элемент имеет нужный атрибут, производит соответствующее действие.

#вопросы_с_собесов #easy

#cheatsheet #javascript #easy by David Mraz

Шпаргалка по методам JavaScript DOM: на заметку фронтенд-разработчику.

💡Работа с датами в JavaScript: шпаргалка для фронтенд-разработчика

#cheatsheet #javascript #easy by David Mraz