Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Всплывание событий
Что же такое "всплывание" событий? Давайте рассмотрим следующий пример (листинг 6.6).
Листинг 6.6. Всплывание событий
<!doctype html>
<html>
<head>
<title>Всплывание событий</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$("*").click(function(e) {
$("#div1")
.append("Элемент " + $(this)[0].tagName + "<br>");
});
});
</script>
</head>
<body>
<p>Щелкните мышью <span style="color:red">здесь</span></p>
<div id="div1"></div>
</body>
</html>В этом примере мы написали обработчик события onclick для всех элементов страницы. Попробуем щелкнуть левой кнопкой мыши на слове "здесь". В итоге, вместо одного события, получим целую последовательность событий.
Элемент SPAN
Элемент P
Элемент BODY
Элемент HTMLИными словами, событие onclick последовательно передается очередному элементу-родителю. Для тега <span> элементом-родителем является абзац. Для абзаца элементом-родителем является само тело документа, а для тела документа элементом-родителем является тег <html>. Такое прохождение событий и называется всплыванием событий.
Иногда всплывание событий необходимо прервать. Для этого внутри функции обратного вызова необходимо вернуть значение false. Продемонстрируем это на примере (листинг 6.7).
Листинг 6.7. Прерывание всплывания событий
<!doctype html>
<html>
<head>
<title>Прерывание всплывания событий</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$("*").click(function(e) {
$("#div1")
.append("Элемент " + $(this)[0].tagName + "<br>");
return false;
});
});
</script>
</head>
<body>
<p>Щелкните мышью <span style="color:red">здесь</span></p>
<div id="div1"></div>
</body>
</html>Попробуем теперь щелкнуть левой кнопкой мыши на слове "здесь". В итоге, вместо четырех событий, получим только одно.
Элемент SPANКроме возврата значения false, для прерывания всплывания событий можно воспользоваться методом stopPropagation() объекта event (листинг 6.8).
Листинг 6.8. Прерывание всплывания с помощью метода stopPropagation()
<!doctype html>
<html>
<head>
<title>Использование метода stopPropagation()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$("*").click(function(e) {
$("#div1")
.append("Элемент " + $(this)[0].tagName + "<br>");
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
});
});
</script>
</head>
<body>
<p>Щелкните мышью <span style="color:red">здесь</span></p>
<div id="div1"></div>
</body>
</html>
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов