Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Всплывание событий
Что же такое «всплывание» событий? Давайте рассмотрим следующий пример (листинг 1.15).
Листинг 1.15. Всплывание событий
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Всплывание событий</title>
</head>
<body>
<p>Щелкните мышью <span style="color: red">здесь</span></p>
<div id="log"></div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('*').click( function() {
$('#log').append('Элемент ' + this.tagName + '<br>');
});
});
</script>
</body>
</html>
В этом примере мы написали обработчик события onclick
для всех элементов страницы. Попробуем щелкнуть левой кнопкой мыши на слове "здесь"
. В итоге, вместо одного события, получим целую последовательность событий:
Элемент SPAN
Элемент P
Элемент BODY
Элемент HTML
Иными словами, событие onclick
последовательно передается очередному элементу-родителю. Для тега <span>
элементом-родителем является абзац. Для абзаца элементом-родителем является само тело документа, а для тела документа элементом-родителем является тег <html>
. Такое прохождение событий и называется всплыванием событий.
Иногда всплывание событий необходимо прервать. Для этого внутри функции обратного вызова необходимо вернуть значение false
. Продемонстрируем это на примере (листинг 1.16).
Листинг 1.16. Прерывание всплывания событий
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Прерывание всплывания событий</title>
</head>
<body>
<p>Щелкните мышью <span style="color: red">здесь</span></p>
<div id="log"></div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('*').click( function() {
$('#log').append('Элемент ' + this.tagName + '<br>');
return false;
});
});
</script>
</body>
</html>
Попробуем теперь щелкнуть левой кнопкой мыши на слове "здесь"
. В итоге, вместо четырех событий, получим только одно:
Элемент SPAN
Кроме возврата значения false
, для прерывания всплывания событий можно воспользоваться методом stopPropagation()
объекта event
(листинг 1.17). Проверить, был ли вызван метод stopPropagation()
ранее, позволяет метод isPropagationStopped()
.
Листинг 1.17. Прерывание всплывания с помощью метода stopPropagation()
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Использование метода stopPropagation()</title>
</head>
<body>
<p>Щелкните мышью <span style="color: red">здесь</span></p>
<div id="log"></div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('*').click( function(e) {
$('#log').append('Элемент ' + this.tagName + '<br>');
e.stopPropagation();
});
});
</script>
</body>
</html>
Как вы уже знаете, для одного события можно назначить несколько обработчиков. В этом случае они будут вызываться в той последовательности, в которой были определены:
<input type="button" value="Нажми меня" id="btn1">
$('#btn1')
.on('click', function() {
console.log('Первый обработчик');
})
.on('click', function() {
console.log('Второй обработчик');
});
При щелчке на кнопке с идентификатором btn1
будут последовательно выведены два сообщения:
Первый обработчик
Второй обработчик
Если нужно отменить вызов других обработчиков и всплывание события, то через объект события следует вызвать метод stopImmediatePropagation()
. Проверить, был ли вызван метод stopImmediatePropagation()
ранее, позволяет метод isImmediatePropagationStopped()
. Пример:
<input type="button" value="Нажми меня" id="btn1">
$('#btn1')
.on('click', function(e) {
console.log('Первый обработчик');
e.stopImmediatePropagation();
})
.on('click', function() {
console.log('Второй обработчик');
});
При щелчке на кнопке с идентификатором btn1
будет выведено одно сообщение:
Первый обработчик
Учитывая, что метод stopImmediatePropagation()
прерывает всплывание события, его можно использовать вместо метода stopPropagation()
:
$(function() {
$('*').click( function(e) {
$('#log').append('Элемент ' + this.tagName + '<br>');
e.stopImmediatePropagation();
});
});
Реквизиты
ЮMoney: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов