Практическое всплытие событий?
С 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.