Примеры общего, практического использования всплытия и захвата событий? - PullRequest
6 голосов
/ 03 марта 2012

Может ли кто-нибудь предоставить практические, повседневные примеры всплытия событий и захвата событий в jQuery / javascript?Я вижу всевозможные примеры, демонстрирующие эти концепции, но они всегда кажутся вещами, которые вам никогда не понадобятся в обычном веб-приложении.

И описания, и фрагменты кода будут высоко оценены.

Ответы [ 2 ]

8 голосов
/ 03 марта 2012

Практическое всплытие событий?

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

Один пример: допустим, у вас есть страница, где элементы создаются динамически, но вы хотите обработать щелчок по этим элементам.Вы не можете привязать обработчик событий непосредственно к ним, пока они не существуют, но привязка отдельных обработчиков к ним при их создании представляет собой небольшую боль.Вместо этого привязайте обработчик событий к объекту контейнера: события click будут пузыриться от отдельных элементов к контейнеру, но вы все равно можете сказать, какой элемент был нажат - jQuery делает это легко, если вы используете соответствующий синтаксис .on(), или.delegate() (или даже .live(), если у вас действительно старая версия jQuery), поскольку она устанавливает this для элемента, по которому щелкнули.

<div id="someContainer"></div>

$("#someContainer").on("click", ".dynamicElement", function() {
    // this is the element, do something with it
});

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

1 голос
/ 20 февраля 2013

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

...