Всплывание событий
Что же такое "всплывание" событий? Давайте рассмотрим следующий пример (листинг 6.6).
Листинг 6.6. Всплывание событий
<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 для всех элементов страницы. Попробуем щелкнуть левой кнопкой мыши на слове "здесь". В итоге, вместо одного события, получим целую последовательность событий.
Элемент P
Элемент BODY
Элемент HTML
Иными словами, событие onclick последовательно передается очередному элементу-родителю. Для тега <span> элементом-родителем является абзац. Для абзаца элементом-родителем является само тело документа, а для тела документа элементом-родителем является тег <html>. Такое прохождение событий и называется всплыванием событий.
Иногда всплывание событий необходимо прервать. Для этого внутри функции обратного вызова необходимо вернуть значение false. Продемонстрируем это на примере (листинг 6.7).
Листинг 6.7. Прерывание всплывания событий
<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>
Попробуем теперь щелкнуть левой кнопкой мыши на слове "здесь". В итоге, вместо четырех событий, получим только одно.
Кроме возврата значения false, для прерывания всплывания событий можно воспользоваться методом stopPropagation() объекта event (листинг 6.8).
Листинг 6.8. Прерывание всплывания с помощью метода stopPropagation()
<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>
 |
 |
 |