jQuery02.md 6.5 KB
jQuery 2
События. Delegated events, on, trigger, propagation.
При динамическом (используя DOM createElement или $("<tag>")) создании элементов возникает следующая проблема - обработчики
событий, назначенные до создания элемента какой-то группе элементов по селектору не работают для новосозданных элементов.
Рассмотрим пример:
<body>
<button>first button</button>
</body>
$(document).ready(function(){
$("button").click(function(){
alert("click");
});
var otherButton = $("<button>");
otherButton.html("second button");
$(document.body).append(otherButton);
});
В примере выше мы создаем обработчик для всех кнопок. На момент назначения обработчика кнопка существует только одна. Далее динамически создается
еще одна кнопка otherButton с текстом second button и добавляется в body. Этой кнопке обработчик click не назначен, так как её не существовало
на момент назначения.
Delegated events, on.
on
Практически все события типа click, keydown являются сокращениями для on. Например click из примера выше аналогичен следующему коду:
$("button").on("click",function(){
alert("click");
});
Делегированные события
Для назначения событий и для будущих элементов (такие события называются Delegated events) используется on для родительского элемента с указанием
селектора дочерних элементов. После этого добавления дочерних элементов отслеживается и обработчики работают и для новых элементов:
$(document.body).on("click", "button", function(){
alert("click");
});
Вместо назначения обработчика click для всех элементов button выше мы указываем в каком элементе (document.body) для каких дочерних элементов
("button") назначить обработчик события "click" отныне и навсегда, т. е. создать делегированное событие.
Инициируем событие, trigger
На каждое событие может быть назначено более одного обработчика:
$(document.body).on("click", "button", function(){
alert("click");
});
$(document.body).on("click", "button", function(){
alert("click 2");
});
В таком случае срабатывают оба обработчика в порядке определения.
Для запуска обработчиков события используйте trigger:
$("button").trigger("click");
Таким образом можете имитировать любые события, или запустить сложную цепочку обработчиков, если она не выделена у вас в отдельную функцию. Так же это полезный прием для автоматизации чужих сайтов, если применить это, например, с TamperMonkey.
Управление обработкой события
Можно назначать события элементам, вложенным друг в друга, например click кнопке и элементу, в котором кнопка находится:
$(document.body).on("click", function(){
alert("body click");
});
Обратите внимание, что тут создается обычное, а не делегированное событие, так как второй параметр - не селектор вложенных элементов, а
обработчик события. Так работает on. При клике на кнопку так же происходит клик на элемент body, в котором эта кнопка находится. Это называется
всплытием события. Подобное поведение не всегда нужно, рассмотрим функции, с помощью которых мы можем изменить эту логику.
stopPropagation
Это функция-метод объекта события, который передается в качестве первого параметра в обработчик события. Используя его вы можете прервать всплытие события:
$(document.body).on("click", "button", function(evt){
evt.stopPropagation();
alert("click");
});
После stopPropagation() событие не будет инициировано и обработано в вышележащих элементах (body в нашем примере)
stopImmediatePropagation
Работает так же, однако прерывает обработку не только событий в вышележащих элементах, но и в следующих обработчиках этого элемента:
$(document.body).on("click", "button", function(evt){
evt.stopImmediatePropagation();
alert("click");
});