Что такое делегация События DOM?

Кто-либо может объяснить делегацию события в JavaScript и как это полезно?

185
задан Brian Tompsett - 汤莱恩 26 August 2019 в 03:27
поделиться

4 ответа

Делегирование событий dom чем-то отличается от определения информатики.

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

7
ответ дан 23 November 2019 в 05:54
поделиться

Делегирование - это метод, при котором объект выражает определенное поведение извне, но в действительности делегирует ответственность за реализацию этого поведения ассоциированному объекту. Сначала это звучит очень похоже на шаблон прокси, но служит совсем другой цели. Делегирование - это механизм абстракции, который централизует поведение объекта (метода).

Обычно говорят: используйте делегирование как альтернативу наследованию. Наследование - хорошая стратегия, когда между родительским и дочерним объектами существуют тесные отношения, однако наследование очень тесно связывает объекты. Часто делегирование - более гибкий способ выразить отношения между классами.

Этот шаблон также известен как «цепочки прокси». Несколько других шаблонов проектирования используют делегирование - от него зависят шаблоны состояния, стратегии и посетителя.

6
ответ дан 23 November 2019 в 05:54
поделиться

Делегат в C # похож на указатель на функцию в C или C ++. Использование делегата позволяет программисту инкапсулировать ссылку на метод внутри объекта делегата. Затем объект делегата может быть передан в код, который может вызвать указанный метод, без необходимости знать во время компиляции, какой метод будет вызван.

См. Эту ссылку -> http://www.akadia.com/services/dotnet_delegates_and_events.html

1
ответ дан 23 November 2019 в 05:54
поделиться

Делегирование событий DOM - это механизм ответа на пользовательские события через одного общего родителя, а не через каждого потомка, посредством магии «всплытия» события (также известного как распространение события).

Когда событие запускается на элементе, происходит следующее :

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

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

<ul onclick="alert(event.type + '!')">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

В этом примере, если бы вы щелкнули по любому из дочерних

  • узлов, вы бы увидели предупреждение «щелчок!» , хотя обработчик кликов не привязан к
  • , по которому вы щелкнули. Если мы привяжем onclick = "..." к каждому
  • , вы получите тот же эффект.

    И что? в чем преимущество?

    Представьте, что теперь вам необходимо динамически добавлять новые

  • элементы в приведенный выше список с помощью манипуляций с DOM:

    var newLi = document.createElement('li');
    newLi.innerHTML = 'Four';
    myUL.appendChild(newLi);
    

    Без использования делегирования событий вам пришлось бы " повторно привяжите обработчик событий «onclick» к новому элементу

  • , чтобы он действовал так же, как его братья и сестры. С делегированием событий вам не нужно ничего делать. Просто добавьте новый
  • в список, и все готово.

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

    Еще одно преимущество делегирования событий заключается в том, что общий объем памяти, используемый прослушивателями событий, уменьшается (поскольку количество привязок событий уменьшается). вниз). Это может не иметь большого значения для небольших страниц, которые часто выгружаются (т. Е. Пользователи часто переходят на разные страницы). Но для приложений с долгим сроком службы это может быть значительным. Есть несколько действительно трудных для отслеживания ситуаций, когда элементы, удаленные из DOM, по-прежнему требуют памяти (т.е. они протекают), и часто эта утечка памяти привязана к привязке события. С делегированием событий вы можете уничтожить дочерние элементы, не рискуя забыть «отвязать» их прослушиватели событий (поскольку слушатель находится на предке). рассматриваются плюсы не преобразования кода для использования делегирования событий

  • Интересный подход PPK обнаружен для делегирования фокуса и размытия событий (которые не , а не пузырь)
  • 299
    ответ дан 23 November 2019 в 05:54
    поделиться
    Другие вопросы по тегам:

    Похожие вопросы: