jQuery Academy · Урок

Остановка распространения событий

«Остановка распространения событий» — бесплатный урок jQuery Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.

Управляйте своими событиями!

Такие события, как щелчки или отправка форм, происходят не только на одном элементе. Они часто проходят через объектную модель документа (DOM).

Умение управлять этим потоком — ключ к созданию точных и интерактивных веб-страниц.

Предотвращение действий по умолчанию

У браузеров есть действия по умолчанию для многих элементов HTML. Например:

Щелчок по тегу <a> открывает новую страницу.
Отправка <form> перезагружает страницу.

Чтобы остановить такое встроенное поведение браузера, используется event.preventDefault().

`preventDefault()` в действии

Попробуйте щёлкнуть ссылку ниже. Обычно она перенаправила бы Вас на example.com, но .preventDefault() останавливает это перенаправление!

<!DOCTYPE html>
<html>
<head>
<title>Prevent Default</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Prevent Default Example</h1>
  <a href="https://example.com" id="myLink">Click Me! (Should not navigate)</a>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myLink').on('click', function(event) {
      event.preventDefault(); // Stop the link from navigating
      $('#output').append('<p>Link click prevented! You\'re still here.</p>');
    });
  });
  </script>
</body>
</html>

Понимание всплытия событий

Когда на элементе происходит событие, например щелчок, оно не просто запускает обработчики этого элемента. Оно «всплывает» вверх по дереву DOM.

Оно запускает обработчики родительского элемента.
Затем — обработчики его родительского элемента.
И так далее, вплоть до <body> и <html>.

Это движение вверх называется всплытием события.

Остановите всплытие: `stopPropagation()`

Иногда необходимо, чтобы событие обрабатывалось только элементом, на котором оно возникло, или определённым родительским элементом, не затрагивая элементы более высокого уровня.

В этом случае используется event.stopPropagation(). Он останавливает дальнейшее всплытие события вверх по дереву DOM.

Пример `stopPropagation()`

Щёлкните внутренний блок. Без stopPropagation() появились бы оба сообщения. С ним появляется только сообщение внутреннего блока, потому что всплытие остановлено.

<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #outer {
    padding: 20px;
    background-color: lightblue;
    border: 1px solid blue;
    margin: 10px;
  }
  #inner {
    padding: 20px;
    background-color: lightcoral;
    border: 1px solid red;
    margin-top: 10px;
  }
</style>
</head>
<body>
  <h1>Stop Propagation Example</h1>
  <div id="outer">
    Outer Div (Click me!)
    <div id="inner">
      Inner Div (Click me!)
    </div>
  </div>
  <div id="log"></div>

  <script>
  $(document).ready(function() {
    $('#outer').on('click', function() {
      $('#log').append('<p>Outer Div clicked!</p>');
    });

    $('#inner').on('click', function(event) {
      event.stopPropagation(); // Stop bubbling here
      $('#log').append('<p>Inner Div clicked!</p>');
    });
  });
  </script>
</body>
</html>

Практическое применение остановки всплытия

stopPropagation() полезен в таких сценариях, как:

Модальные окна: предотвращение закрытия модального окна при щелчке внутри него, который может вызвать щелчок по наложенному слою.
Вложенные раскрывающиеся списки: сохранение дочернего списка открытым при щелчке по родительскому.
Сложные компоненты интерфейса: предотвращение конфликтов между обработчиками событий отдельных компонентов и глобальными обработчиками.

Объект события

И .preventDefault(), и .stopPropagation() являются методами объекта события. Этот объект передаётся в качестве аргумента функции — обработчика события.

Объект события содержит много полезной информации о произошедшем событии, например его тип, целевой элемент и координаты мыши.

<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <h1>Event Object Properties</h1>
  <button id="myButton">Click Me</button>
  <div id="output"></div>

  <script>
  $(document).ready(function() {
    $('#myButton').on('click', function(event) {
      $('#output').empty(); // Clear previous output
      $('#output').append('<p>Event Type: <code>' + event.type + '</code></p>');
      $('#output').append('<p>Target Element ID: <code>' + event.target.id + '</code></p>');
      $('#output').append('<p>Mouse X Position: <code>' + event.pageX + '</code></p>');
      $('#output').append('<p>Mouse Y Position: <code>' + event.pageY + '</code></p>');
    });
  });
  </script>
</body>
</html>

Объединение обоих методов

Иногда необходимо использовать и .preventDefault(), и .stopPropagation(). Они решают разные задачи:

.preventDefault(): останавливает действие браузера по умолчанию.
.stopPropagation(): останавливает перемещение события вверх по DOM.

Например, кнопке внутри сложного компонента может потребоваться предотвратить действие по умолчанию при щелчке И остановить передачу щелчка обработчикам родительских элементов.

Понимание управления событиями

У Вас есть ссылка <a href="#" id="link"> внутри div <div id="container">. Вы хотите предотвратить переход по ссылке, а также не допустить, чтобы событие щелчка вызвало какой-либо обработчик на #container.

Повторение: управление событиями

Отличная работа! Вы научились управлять потоком событий:

.preventDefault(): останавливает действие браузера по умолчанию для события, например переход по ссылке или отправку формы.
.stopPropagation(): предотвращает всплытие события вверх по дереву DOM к родительским элементам.

Эти мощные методы позволяют точно управлять поведением событий в веб-приложениях, обеспечивая более предсказуемое и надёжное взаимодействие с пользователем.

Часто задаваемые вопросы

Урок «Остановка распространения событий» бесплатный?

Да — полный текст урока «Остановка распространения событий» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.

Чему я научусь в уроке «Остановка распространения событий»?

Изучите .stopPropagation() и .preventDefault(), чтобы управлять потоком событий, предотвращать стандартные действия браузера и эффективно обрабатывать сложные взаимодействия событий. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать jQuery Academy?

Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Остановка распространения событий»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке jQuery Academy?

Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Надёжное делегирование событий
Остановка распространения событий
Создание и вызов пользовательских событий

← Назад к jQuery Academy