Методы обработки всплывания событий

Что же такое "всплывание" событий? Давайте рассмотрим следующий пример


Листинг 6.6. Всплывание событий
<html>
<head>
<title>Всплывание событий</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(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
Элемент Р
Элемент BODY
Элемент HTML

Иными словами, событие onclick последовательно передается очередному элементу-родителю. Для тега <span> элементом-родителем является абзац. Для абзаца элементом-родителем является само тело документа, а для тела документа элементом-родителем является тег <html>. Такое прохождение событий и называется всплыванием событий.
Иногда всплывание событий необходимо прервать. Для этого внутри функции обратного вызова следует вернуть значение false. Продемонстрируем это на примере

Листинг 6.7. Прерывание всплывания событий
<html>
<head>
<title>Прерывание всплывания событий</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(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. Прерывание всплывания с помощью метода stopPropagation()
<html> <head> <title>Прерывание всплывания с помощью метода stopPropagation()
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(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>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *