Введение в события браузера | Учебник JavaScript W3docs

Освоение событий браузера в JavaScript

Событие браузера — это сигнал о том, что на странице что-то произошло: пользователь нажал кнопку, нажал клавишу, изображение завершило загрузку, окно было изменено в размере. Реагирование на эти сигналы превращает статический документ в интерактивное приложение.

В этом руководстве объясняется, что такое события, три способа их прослушивания (и какой из них предпочтительнее), что даёт объект события, как прекратить прослушивание, а также рассматриваются шесть запускаемых реальных примеров. Если вы только знакомитесь с языком, начните с введения в JavaScript.

Понимание событий браузера

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

События, инициированные пользователем — нажатие кнопки мыши, ввод текста, перемещение указателя, отправка формы.
Системные события — завершение загрузки страницы, ошибка загрузки изображения, окончание CSS-анимации, изменение размера окна.

Типы событий

Вот некоторые из наиболее распространённых событий, сгруппированных по категориям:

Категория	События
Мышь	`click`, `dblclick`, `mouseover`, `mouseout`, `mousedown`, `mouseup`
Клавиатура	`keydown`, `keyup` (`keypress` устарел)
Форма	`submit`, `change`, `input`, `focus`, `blur`
Документ / окно	`DOMContentLoaded`, `load`, `resize`, `scroll`, `beforeunload`

У каждой категории есть своя отдельная глава: см. события мыши, события клавиатуры, события отправки формы и события загрузки ресурсов.

Три способа добавить обработчики событий

Существует три способа реагировать на событие. Они перечислены от наименее гибкого к наиболее гибкому.

1. HTML-атрибут (onclick="...") — быстрый способ, но смешивает JavaScript с разметкой и допускает только один обработчик. Избегайте его в реальных проектах.

<button onclick="alert('Button clicked!')">Click Me!</button>

2. Свойство DOM (element.onclick) — код остаётся в JavaScript, однако назначение нового обработчика перезаписывает предыдущий, поэтому по-прежнему допускается только один обработчик на событие.

<button id="myButton">Click Me!</button>

document.getElementById('myButton').onclick = function () {
  alert('Button clicked!');
};

3. addEventListener (рекомендуется) — стандартный подход. Вы можете прикрепить несколько обработчиков для одного и того же события, управлять фазой захвата/всплытия и удалить обработчик позже.

<button id="myButton">Click Me!</button>

document.getElementById('myButton').addEventListener('click', function () {
  alert('Button clicked!');
});

addEventListener предпочтителен, поскольку позволяет регистрировать несколько слушателей для одного события и даёт более тонкий контроль над обработкой событий — например, вызов event.stopPropagation() или event.preventDefault(). Также он принимает объект параметров: { once: true } запускает обработчик только один раз, а { capture: true } прослушивает на фазе захвата (см. всплытие и захват).

Удаление обработчика событий

Слушатель остаётся прикреплённым до тех пор, пока вы его не удалите (или элемент не будет удалён сборщиком мусора). Для удаления необходимо передать ту же ссылку на функцию, которую вы добавляли — встроенную анонимную функцию удалить невозможно, так как на неё нет ссылки.

function handleClick() {
  console.log('clicked');
}

const btn = document.getElementById('myButton');
btn.addEventListener('click', handleClick);

// later — stops the handler from firing again
btn.removeEventListener('click', handleClick);

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

Когда срабатывает событие, браузер создаёт объект события, описывающий произошедшее, и передаёт его первым аргументом в ваш обработчик. Полезные свойства включают:

event.type — имя события, например "click".
event.target — элемент, который непосредственно инициировал событие.
event.currentTarget — элемент, к которому прикреплён слушатель (равен this в обработчике с обычной функцией).
event.preventDefault() — отменяет действие браузера по умолчанию (например, переход по ссылке).
event.stopPropagation() — останавливает всплытие события к элементам-предкам.

<button id="myButton">Click Me!</button>
<div style="margin-top:10px;" id="eventInfo"></div>

<script>
  document.getElementById('myButton').addEventListener('click', function(event) {
    var eventInfo = 'Event Type: ' + event.type + '<br />Clicked Element: ' + event.target.tagName;
    document.getElementById('eventInfo').innerHTML = eventInfo;
  });
</script>

Попробуйте сами »

Практические примеры обработки событий браузера

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

Пример 1: Событие отправки формы

Обработка отправки формы для проверки введённых данных перед отправкой на сервер:

<form id="loginForm">
  Username: <input type="text" name="username" required />
  Password: <input type="password" name="password" required />
  <button type="submit">Login</button>
</form>

<script>
  document.getElementById('loginForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the form from submitting normally
    if (this.username.value.length < 4 || this.password.value.length < 4) {
      alert('Username and password must be at least 4 characters long.');
    } else {
      this.submit(); // Submit the form manually if validation passes
      alert('successfully submitted');
    }
  });
</script>

Попробуйте сами »

(Примечание: здесь вместо стрелочной функции используется обычная функция, чтобы сохранить контекст this, что позволяет this.username и this.password корректно ссылаться на элементы формы.)

Пример 2: Обработка событий наведения и ухода мыши

Изменение стиля кнопки при наведении на неё мыши и сброс при уходе мыши:

<button id="hoverButton">Hover Over Me!</button>

<script>
  const button = document.getElementById('hoverButton');
  button.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'green';
  });
  button.addEventListener('mouseleave', function() {
    this.style.backgroundColor = '';
  });
</script>

Попробуйте сами »

Пример 3: События клавиатуры

Выполнение функции при нажатии клавиши Enter:

<input type="text" id="inputField" placeholder="Type something and press Enter" />

<script>
  document.getElementById('inputField').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      alert('You pressed Enter!');
    }
  });
</script>

Попробуйте сами »

Пример 4: Функциональность перетаскивания

Реализация перетаскивания для простого переноса изображения внутри веб-страницы:

<span>Drop image below</span>
<div id="dragArea" style="width: 300px; height: 300px; border: 2px dashed #ccc;">
  
</div>
<img id="draggableImage" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Crect width='150' height='150' fill='%234f46e5'/%3E%3Ctext x='75' y='80' fill='white' font-size='18' text-anchor='middle'%3EDrag me%3C/text%3E%3C/svg%3E" draggable="true" style="width: 150px; height: 150px;">

<script>
  const dragArea = document.getElementById('dragArea');
  const draggableImage = document.getElementById('draggableImage');

  // Event listener for the drag start
  draggableImage.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
  });

  // Event listener for dragging over the drag area
  dragArea.addEventListener('dragover', function(event) {
    event.preventDefault(); // Necessary to allow the drop
  });

  // Event listener for drop
  dragArea.addEventListener('drop', function(event) {
    event.preventDefault(); // Prevent default behavior (like opening as link for some elements)
    const data = event.dataTransfer.getData("text/plain");
    const image = document.getElementById(data);
    dragArea.appendChild(image);
  });
</script>

Попробуйте сами »

Пояснение:

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

Пример 5: События начала и конца анимации

Использование CSS-анимаций и обработка их начала и конца с помощью JavaScript:

<div id="animateBox" style="width: 100px; height: 100px; background: red; position: relative; animation: moveBox 5s 2;"></div>
<div id="animationStatus"></div>

<style>
  @keyframes moveBox {
    0% { left: 0; }
    50% { left: 200px; }
    100% { left: 0; }
  }
</style>

<script>
  const box = document.getElementById('animateBox');
  const statusDisplay = document.getElementById('animationStatus');

  box.addEventListener('animationstart', function() {
    statusDisplay.innerHTML = 'Animation started';
  });

  box.addEventListener('animationend', function() {
    statusDisplay.innerHTML = 'Animation ended';
  });

  box.addEventListener('animationiteration', function() {
    statusDisplay.innerHTML = 'Animation iteration';
  });
</script>

Попробуйте сами »

(Примечание: animationstart и связанные с ним события являются стандартными в современных браузерах. Старые версии Safari могут требовать вендорных префиксов, например -webkit-animationstart, однако для текущей разработки рекомендуются стандартные имена.)

Пояснение:

animationstart срабатывает один раз при начале анимации.
animationiteration срабатывает в начале каждого повтора — полезно, когда анимация настроена на многократное воспроизведение.
animationend срабатывает один раз по завершении анимации. Блок #animationStatus обновляется при каждом событии, обеспечивая живую обратную связь на странице.

Пример 6: Пользовательские события

Создание и отправка пользовательских событий для обработки специфических для приложения сценариев:

<button id="customEventButton">Trigger Custom Event</button>

<script>
  // Creating a custom event
  const myEvent = new CustomEvent('myCustomEvent', {
    detail: { message: 'Custom event triggered' }
  });

  // Event listener for custom event
  document.addEventListener('myCustomEvent', function(event) {
    alert('Event Message: ' + event.detail.message);
  });

  // Dispatch the custom event when button is clicked
  document.getElementById('customEventButton').addEventListener('click', function() {
    document.dispatchEvent(myEvent);
  });
</script>

Попробуйте сами »

Пояснение:

Создание пользовательского события: определяет пользовательское событие с дополнительными данными (detail, содержащий сообщение).
Обработка события: настраивает слушатель пользовательского события, отображающий предупреждение с сообщением из деталей события.
Запуск события: запускает пользовательское событие при нажатии кнопки.

Заключение

События браузера — это мост между действиями пользователя и реакцией вашего кода. Ключевые выводы: используйте addEventListener для гибкости, извлекайте нужные данные из объекта события, вызывайте preventDefault() или stopPropagation() при необходимости переопределить поведение по умолчанию и удаляйте ненужные слушатели.

Далее изучите отдельные главы о событиях мыши, событиях клавиатуры, обработке отправки форм и отправке пользовательских событий, чтобы создавать более насыщенные интерфейсы, управляемые событиями.

Практика

Каковы различные аспекты событий браузера в JavaScript?

События браузера позволяют пользователю взаимодействовать с элементами веб-страницы.События браузера возникают только после полной загрузки страницы.Каждое событие браузера имеет имя (например, click, dblclick, mouseover и т.д.) и код, выполняемый при наступлении события.События браузера в JavaScript полностью зависят от действий пользователя, а не от скриптов страницы.Можно настроить функции для реагирования на определённые события браузера и получения желаемого результата.

Практика

Какие утверждения об addEventListener верны?

Вы можете прикрепить более одного обработчика для одного и того же события на одном элементе.Назначение второго обработчика всегда перезаписывает первый.Чтобы удалить слушатель с помощью removeEventListener, необходимо передать ту же ссылку на функцию, которую вы добавляли.Встроенные анонимные функции можно удалить позже по имени.Он принимает объект параметров, например { once: true } или { capture: true }.

Введение в события браузера в JavaScript

Освоение событий браузера в JavaScript

Понимание событий браузера

Типы событий

Три способа добавить обработчики событий

Удаление обработчика событий

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

Практические примеры обработки событий браузера

Пример 1: Событие отправки формы

Пример 2: Обработка событий наведения и ухода мыши

Пример 3: События клавиатуры

Пример 4: Функциональность перетаскивания

Пример 5: События начала и конца анимации

Пример 6: Пользовательские события

Рекомендации

Заключение

Практика