Что такое делегирование событий JavaScript ?

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

Возьмем пример

<div id="buttons"> <!-- Step 1 -->

  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>
  <button class="buttonClass">Click me</button>

</div>

<script>

  document.getElementById('buttons')
    .addEventListener('click', event => { // Step 2
      if (event.target.className === 'buttonClass') { // Step 3
        console.log('Button Clicked !');
      }
    });

</script>

Идея делегирования событий проста. Вместо того, чтобы прикреплять прослушиватели событий непосредственно к кнопкам, вы делегируете прослушивание родительскому элементу <div id="buttons">. Когда кнопка нажата, прослушиватель родительского элемента перехватывает всплывающее событие.

ШАГ 1

В приведенном выше примере <div id="buttons"> является родительским элементом кнопок.

ШАГ 2

document.getElementById('buttons') .addEventListener('click', handler) прикрепляет прослушиватель событий к родительскому элементу кнопок. Этот прослушиватель реагирует на нажатия кнопок, потому что событие нажатия кнопки всплывает через предков (благодаря распространению события).

ШАГ 3

При нажатии кнопки вызывается функция-обработчик с аргументом: объект event. Свойство event.target — это элемент, на который было отправлено событие, в примере это кнопка:

Пожалуйста, оставьте аплодисменты

Спасибо !!!
Предложения всегда приветствуются!
Не стесняйтесь комментировать любые предложения/исправления или отправить мне письмо по адресу [email protected]