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

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

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

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Всплывание событий</title>
</head>
<body>
   <p>Щелкните мышью <span style="color: red">здесь</span></p>
   <div id="log"></div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('*').click( function() {
      $('#log').append('Элемент ' + this.tagName + '<br>');
   });
});
</script>
</body>
</html>

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

Элемент SPAN
Элемент P
Элемент BODY
Элемент HTML

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

Иногда всплывание событий необходимо прервать. Для этого внутри функции обратного вызова необходимо вернуть значение false. Продемонстрируем это на примере (листинг 1.16).

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

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Прерывание всплывания событий</title>
</head>
<body>
   <p>Щелкните мышью <span style="color: red">здесь</span></p>
   <div id="log"></div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('*').click( function() {
      $('#log').append('Элемент ' + this.tagName + '<br>');
      return false;
   });
});
</script>
</body>
</html>

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

Элемент SPAN

Кроме возврата значения false, для прерывания всплывания событий можно воспользоваться методом stopPropagation() объекта event (листинг 1.17). Проверить, был ли вызван метод stopPropagation() ранее, позволяет метод isPropagationStopped().

Листинг 1.17. Прерывание всплывания с помощью метода stopPropagation()

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Использование метода stopPropagation()</title>
</head>
<body>
   <p>Щелкните мышью <span style="color: red">здесь</span></p>
   <div id="log"></div>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('*').click( function(e) {
      $('#log').append('Элемент ' + this.tagName + '<br>');
      e.stopPropagation();
   });
});
</script>
</body>
</html>

Как вы уже знаете, для одного события можно назначить несколько обработчиков. В этом случае они будут вызываться в той последовательности, в которой были определены:

<input type="button" value="Нажми меня" id="btn1">

$('#btn1')
   .on('click', function() {
      console.log('Первый обработчик');
   })
   .on('click', function() {
      console.log('Второй обработчик');
   });

При щелчке на кнопке с идентификатором btn1 будут последовательно выведены два сообщения:

Первый обработчик
Второй обработчик

Если нужно отменить вызов других обработчиков и всплывание события, то через объект события следует вызвать метод stopImmediatePropagation(). Проверить, был ли вызван метод stopImmediatePropagation() ранее, позволяет метод isImmediatePropagationStopped(). Пример:

<input type="button" value="Нажми меня" id="btn1">

$('#btn1')
   .on('click', function(e) {
      console.log('Первый обработчик');
      e.stopImmediatePropagation();
   })
   .on('click', function() {
      console.log('Второй обработчик');
   });

При щелчке на кнопке с идентификатором btn1 будет выведено одно сообщение:

Первый обработчик

Учитывая, что метод stopImmediatePropagation() прерывает всплывание события, его можно использовать вместо метода stopPropagation():

$(function() {
   $('*').click( function(e) {
      $('#log').append('Элемент ' + this.tagName + '<br>');
      e.stopImmediatePropagation();
   });
});

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов