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

JavaScript предлагает универсальный инструментарий, который позволяет пользователям взаимодействовать с веб-страницами уникальными способами. Всплывание событий – это концепция обработчика, который сначала воздействует на определенный элемент в HTML, а затем перемещается вверх по ветви семейства к его непосредственному родительскому элементу и далее к его предкам, что может означать весь документ или само окно. Даже без вызова определенного обработчика событий для родителей или выше, всплывающая подсказка событий все еще происходит.

Поскольку интерактивность JavaScript вносит изменения в страницу после ее первоначальной загрузки, обычно когда пользователь создает на ней новые элементы с помощью мыши или клавиатуры, всплывающая подсказка учитывает эти новые элементы. Это автоматическое появление позволяет нам отслеживать веб-страницу в более широком масштабе, поскольку ручное добавление все большего и большего количества прослушивателей событий становится громоздким по мере увеличения страницы.

Выше вы можете видеть простой элемент HTML-формы с кнопкой отправки, вложенной в элемент класса, и со стороны пользователя это выглядит так:

Теперь, когда форма отправлена, новая задача должна быть сгенерирована и добавлена ​​к списку. Однако эти новые задачи не были частью исходного HTML. Мы используем JavaScript для создания и добавления их в DOM.

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

Делегирование события вступает в игру здесь, когда мы добавляем новую задачу «Выгулять собаку» к ранее пустому элементу ненумерованного списка с именем collection. Теперь этот новый элемент списка добавляется к DOM с соответствующей кнопкой удаления.

Чтобы удалить эту недавно созданную задачу с нашей страницы, нам нужно еще раз принять во внимание всплывающее окно событий наряду с делегированием событий. В нашем коде кнопка удаления запускает функцию удаления, но вместо того, чтобы просто вызывать ее для самой себя, в данном случае это красная кнопка X, она будет вызываться для родителя самого родителя (элемента списка), в результате чего все три быть удалены из пользовательского интерфейса.

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

Спасибо, что нашли время, чтобы прочитать мой пост. Оставайтесь увлажненными.