Оглавление

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

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

 

Листинг 35. Всплывание событий


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Всплывание событий</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_print(Str) {
   var div1 = document.getElementById("div1");
   div1.innerHTML += Str + "<br>";
}
//-->
</script>
</head>
<body onclick="f_print('Событие onclick - Документ');">
<p onclick="f_print('Событие onclick - Абзац');">
Щелкните мышью 
<span style="color: red" onclick="f_print('Событие onclick - SPAN');">
здесь</span>
</p>
<div id="div1"></div>
</body>
</html>

 

В этом примере мы написали обработчик события onclick для трех элементов страницы — тела документа, абзаца и тега <span>. Попробуем щелкнуть левой кнопкой мыши на слове "здесь". В итоге вместо одного события onclick мы получим целую последовательность событий:
Событие onclick - SPAN

Событие onclick - Абзац

Событие onclick - Документ


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


Иногда всплывание событий необходимо прервать. Для этого свойству cancelBubble объекта event следует присвоить значение true. Кроме того, в некоторых Web-браузерах для прерывания всплывания событий можно воспользоваться методом stopPropagation() объекта event. Обратите внимание на то, что метод stopPropagation() не реализован в Web-браузере Internet Explorer. Продемонстрируем прерывание всплывания событий на примере (листинг 36).

 

Листинг 36. Прерывание всплывания событий


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Прерывание всплывания событий</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_print(Str, e) {
   var div1 = document.getElementById("div1");
   div1.innerHTML += Str + "<br>";
   e = e || window.event;
   if (e.stopPropagation) e.stopPropagation();
   else e.cancelBubble = true;
}
//-->
</script>
</head>
<body onclick="f_print('Событие onclick - Документ', event);">
<p onclick="f_print('Событие onclick - Абзац', event);">
Щелкните мышью 
<span style="color: red" onclick="f_print('Событие onclick - SPAN', event);">
здесь</span>
</p>
<div id="div1"></div>
</body>
</html>

 

Попробуем теперь щелкнуть левой кнопкой мыши на слове "здесь". В итоге вместо трех событий мы получим только одно:
Событие  onclick  -   SPAN

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити