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

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

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

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

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

Типы событий

Вот некоторые распространённые типы событий браузера:

• События мыши: Click, dblclick, mouseover, mouseout, mousedown, mouseup
• События клавиатуры: keydown, keyup (keypress устарел)
• События форм: Submit, change, focus, blur
• События документа/окна: Load, resize, scroll, unload

Добавление обработчиков событий

Обработчики событий — это функции в JavaScript, которые выполняются, когда происходит указанное событие. Добавить обработчики событий к элементу можно двумя основными способами:

1. HTML-атрибуты событий:

---

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

2. Обработчики событий JavaScript:

---

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

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

Второй способ с использованием addEventListener более гибкий и мощный, так как позволяет добавлять несколько обработчиков для одного и того же события, а также даёт лучший контроль над обработкой события (например, с помощью event.stopPropagation() или event.preventDefault()).

Обработка событий

Когда происходит событие, браузер создаёт объект события, который описывает это событие, и передаёт его в качестве аргумента обработчику или слушателю события. Этот объект содержит всю важную информацию о событии, включая тип события, целевой элемент и другие свойства, специфичные для события.

---

<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>

Try it Yourself »

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

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

Пример 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>

Try it Yourself »

(Примечание: здесь используется обычная функция вместо стрелочной, чтобы сохранить контекст 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>

Try it Yourself »

Пример 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>

Try it Yourself »

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

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

---

<span>Drop image below</span>
<div id="dragArea" style="width: 300px; height: 300px; border: 2px dashed #ccc;">
  
</div>
<img id="draggableImage" src="https://via.placeholder.com/150" 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>

Try it Yourself »

Пояснение:

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

Пример 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>

Try it Yourself »

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

1. Блок статуса анимации: Добавлен новый элемент <div> с ID animationStatus. Этот элемент используется для отображения сообщений о состоянии анимации.
2. Обработчики событий: Обновлены обработчики событий animationstart, animationend и animationiteration, чтобы изменять текст блока animationStatus.
3. Встроенная обратная связь: Каждый обработчик события устанавливает внутренний HTML блока 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>

Try it Yourself »

Пояснение:

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

Заключение

Освоение событий браузера необходимо для разработки динамичных и отзывчивых веб-приложений. Понимая, как правильно использовать обработчики событий и обрабатывать разные типы событий, вы сможете значительно повысить интерактивность и удобство использования ваших сайтов. Приведённые выше примеры иллюстрируют различные способы эффективной обработки событий, обеспечивая прочную основу для дальнейшего изучения и реализации более сложного поведения, основанного на событиях, в ваших проектах.

Практика

What are the different aspects of browser events in JavaScript?

Browser events allow a user’s interaction with elements on a webpage.Browser events only occur after the page has fully loaded.Each browser event has a name (like click, dblclick, mouseover, etc.) and a code that executes when the event happens.Browser events in JavaScript are purely dependent on the user's actions, not on the page's scripts.It is possible to set up functions to react to specific browser events and produce a desired outcome.