Всплывание событий

Что же такое "всплывание" событий? Давайте рассмотрим следующий пример (листинг 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>
Предыдущая статья Все статьи Следующая статья