Привет, кодеры! Сегодня я расскажу о полезной и мощной концепции обработки событий в JavaScript, называемой делегированием событий. Но сначала необходимы небольшие базовые знания.

Общие сведения: захват событий и пузыри

Атрибут onclick обычно прикрепляется к элементу ‹button› в HTML. Этот атрибут позволяет кнопке запускать событие (функцию), когда кто-то нажимает на нее. Подобно тому, как вы добавляете addEventListener() к кнопке из скрипта.

Для обработчиков событий onclick выполняются 2 фазы: захват и всплытие.

Захват событий: браузер проверяет с самого верхнего элемента ‹html› на наличие на нем обработчика onclick. Если это так, он запустит его перед перемещением вниз к следующему элементу HTML и будет повторять процесс, пока не достигнет целевого (нажатого) элемента. AKA Top to Target.

С другой стороны,

Пузыри событий: браузер проверяет целевой (нажатый) элемент на наличие на нем обработчика onclick. Если это так, он запустит его перед перемещением к следующему элементу HTML и будет повторять процесс, пока не достигнет самого верхнего элемента ‹html›. AKA Target to Top.

Вот визуальное объяснение двух этапов

Примечание. В современных браузерах по умолчанию все обработчики событий зарегистрированы для фазы восходящей цепочки. Источник: developer.mozilla.org/en-US/docs/Learn/Java ..

По этой причине использование слишком большого количества обработчиков onclick иногда может привести к путанице, особенно когда у вас есть событие, которое запускается в элементе с родительским элементом, который также имеет атрибут onlick. «Onclick» родительского элемента будет срабатывать, даже если вы этого не хотите.

Решение этой проблемы:

  1. Вместо этого используйте addEventListener()
  2. Добавьте event.stopPropagation() в функцию события

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

Делегирование событий

Мощный и эффективный шаблон обработки событий, который можно использовать, когда много элементов в родительском элементе запускают одно и то же событие.

Давайте посмотрим на пример. Предположим, у вас есть приложение для «списка дел», подобное этому:

Вместо добавления обработчика событий в каждую кнопку «ЗАВЕРШЕНО» для удаления задачи при нажатии кнопки, мы можем просто разместить один обработчик событий в родительском элементе.

Вот HTML:

<div id="task-box">
    <h2>My Tasks</h2>
    <div id="task">
        <button class="done">COMPLETED</button>
        <p>9am-10am</p>
        <p>Walk my dog</p>
    </div>
    <div id="task">
        <button class="done">COMPLETED</button>
        <p>10am-12pm</p>
        <p>Do homework</p>
    </div><div id="task">
        <button class="done">COMPLETED</button>
        <p>12pm-4pm</p>
        <p>Lunch with friends</p>
    </div>
</div>

Таким образом, вместо «onclick» для каждого <button> элемента. У нас есть onclick, назначенный элементу <div id="task-box">, который проверяет, была ли нажата кнопка, и запускает функцию removeTask (), чтобы удалить эту кнопку и ее задачу из списка дел. Давайте закодируем это:

document.getElementById("task-box").onclick = function(event) { 
       if (event.target && event.target.matches("button.done")) {
                  removeTask(event.target.parentNode); 
       } 
});

И результат сработал отлично:

Объяснение

Когда кнопка нажата, фаза всплывания проверяет, есть ли у кнопки (целевой элемент) «нажатие кнопки». Это не так, поэтому он переходит к ‹div id =« task »› и снова проверяет. Нет, у него тоже нет «onclick», поэтому он снова перемещается в ‹div id =” task-box ”›. Ага! Обнаружен "onclick"! Таким образом, он запустит функцию, которая проверяет event.target (выбранный элемент). Если это кнопка с class = «done», то мы удалим ‹div id =« task »› (parentNode of event.target), вызвав функцию removeTask ().

Вот и все!

Я надеюсь, что этот простой пример поможет вам наглядно представить, как работает делегирование событий и как оно использует всплытие / захват событий для реализации своей концепции. Это очень полезно в ситуациях, подобных этому списку дел, когда элементы постоянно удаляются и добавляются. Будет сложно добавить кнопку «onclick» к каждой кнопке.

Существует так много замечательных применений для реализации делегирования событий. Надеюсь, вы сможете применить это в своих проектах. Спасибо за чтение, и если вы сочтете это полезным, пожалуйста, оставьте «большой палец вверх», чтобы сообщить мне ~ Если у вас есть какие-либо вопросы относительно захвата / всплытия событий и делегирования событий, не стесняйтесь спрашивать в комментариях. До следующего раза, ура!