В настоящее время я изучаю Javascript для курса, и, черт возьми, примеры, которые я нахожу в Интернете, демонстрирующие некоторые концепции, просто не достигают точки зрения.

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

Во-первых, что представляет собой событие?

Событие — это то, что вызовет возникновение чего-то другого. Эти события могут выполняться пользователем или самим веб-сайтом. Общие HTML-события включают в себя:

  • Щелчки мыши
  • Парит
  • Браузер завершает загрузку

Там еще куча, но суть вы поняли.

Прослушиватель событий — это, по сути, функция и цикл. Когда прослушиватель событий объявляется и прикрепляется к элементу, он «слушает», когда событие произойдет, и приступит к выполнению своих обязанностей, как только это событие, наконец, произойдет.

Вот 2 примера, один с пользовательским (внешним) триггером и один с внутренним триггером соответственно:

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

Итак, это основные сведения о событиях и их прослушивании, давайте продолжим..

Распространение событий. Большое слово, объясните?

По-настоящему классное объяснение можно найти здесь, а вот своими словами —

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

Есть два способа справиться с тем, как происходят эти события. Они называются «всплывающие события» и «захват событий» или «просачивание».

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

Работа с 5000 слушателей событий и почему вам не следует этого делать

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

Сцена I: [Введите динамически добавляемые элементы списка с количеством... ну, скажем, 5000.]

Проблема, которую нужно решить, заключается в том, чтобы эти элементы списка исчезали при нажатии. Да, нажмите на любой и все элементы списка, и они *пуф* исчезнут.

Простой подход будет выглядеть примерно так:

По сути, вы бы прикрепили прослушиватель событий к каждому элементу списка. Теперь это не так уж сложно с помощью простого цикла for, но есть несколько недостатков. Добавление прослушивателя событий к каждому отдельному элементу займет время O(n), пропорциональное количеству элементов. Каждый узел DOM является самостоятельным объектом и может иметь набор свойств. Очень большое количество прослушивателей в вашем реальном DOM потенциально может использовать достаточно памяти для снижения производительности.

Жаль, что нет места, где можно точно узнать, как оптимизировать это решение и выполнить его за время O(1).

Шучу, есть. Продолжай читать.

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

Так что же такое делегирование событий и зачем мне это знать?

Идея здесь в том, что если у нас есть куча элементов или объектов, которые обрабатываются одинаковым или похожим образом, почему бы нам просто не назначить один (1) единственный обработчик общему предку, а не каждому внутреннему потомку?

В случае предлагаемой проблемы все эти элементы списка помещаются в неупорядоченный список ‹ul›. Если мы назначим обработчик этому родителю вместо всех элементов списка, мы сможем сделать то же самое, но за постоянное время, благодаря всплыванию событий! Мы можем добиться этого результата с помощью jQuery и .on:

Этот подход помещает прослушиватель событий в родительский элемент (в данном случае всеобъемлющий ‹ul id="foo"›) и прослушивает события в дочерних элементах (‹li›), а затем воздействует на реальную цель. Возвращаясь к концепции всплытия событий, вот краткое описание того, как это происходит здесь:

  • Обработчик ставится на ul#foo
  • Цель «li» идет после параметра события, которым является «щелчок».
  • Прослушиватель событий отслеживает щелчок на любом из дочерних элементов ul#foo и «пузырится», пока не достигнет родителя.
  • Затем функция (которая скрывает элементы списка) запускается как обычно для всех дочерних элементов.

Этот подход также позволяет вам динамически добавлять дочерние элементы к родителю и автоматически применять прослушиватели событий к этим дочерним элементам.

В случае, если вы не хотите, чтобы событие запускалось/поднималось всегда вверх, есть удобная функция .stopPropogation(), но мы не будем касаться ее в этом докладе.

Вывод

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

Продолжай бурлить.