Карта сайта

Урок 22: События в JavaScript’е

/Уроки по JavaScript/Урок 22: События в JavaScript’е
Урок 22: События в JavaScript’е
Автор: написал в рубрике Уроки по JavaScript. 0 Комментариев.

Сегодня мы погрузимся в одну из самых важных тем для создания интерактивных веб-страниц, работу с событиями в JavaScript. Если вы мечтаете, чтобы ваши кнопки реагировали на клики, элементы менялись при наведении курсора, а страница адаптировалась к скроллу, этот урок станет вашим проводником.

События в JavaScript это действия, которые происходят на веб-страницею Клики мыши, нажатия клавиш, загрузка контента, скролл и многое другое. Они позволяют сделать сайт «живым», реагирующим на действия пользователя. Без событий веб-страницы были бы статичными, как обычные документы в Word.

Примеры событий:

  • Пользовательские: клик (click), двойной клик (dblclick), наведение (mouseover), скролл (scroll), ввод текста (input).
  • Системные: загрузка страницы (load), ошибка (error), изменение размеров окна (resize).

События можно «ловить» и обрабатывать с помощью функций-обработчиков (event handlers). Именно так мы связываем действия пользователя с логикой нашего скрипта.

Обработка кликов, наведений и скролла

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

1. Клики (click)

Клик самое часто используемое событие. Например, вы можете добавить реакцию на нажатие кнопки:

<button id="myButton">Нажми меня</button>
<script>
  const button = document.getElementById('myButton');

  button.onclick = function() {
    alert('Кнопка нажата!');
  };
</script>

Но есть более гибкий способ — метод addEventListener().

2. Наведение (mouseover и mouseout)

Эти события срабатывают, когда курсор попадает на элемент (mouseover) или покидает его (mouseout):

<div id="hoverMe">Наведи курсор</div>
<script>
  const div = document.getElementById('hoverMe');

  div.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'lightblue';
  });

  div.addEventListener('mouseout', function() {
    this.style.backgroundColor = 'white';
  });
</script>

3. Скролл (scroll)

Событие scroll отслеживает прокрутку страницы или элемента. Например, можно скрывать шапку при скролле вниз:

window.addEventListener('scroll', function() {
  const header = document.querySelector('header');
  if (window.scrollY > 100) {
    header.style.display = 'none';
  } else {
    header.style.display = 'block';
  }
});

Методы addEventListener() и removeEventListener()

Эти методы основа работы с событиями. Они позволяют добавлять и удалять обработчики, что особенно важно для оптимизации производительности.

addEventListener()

Синтаксис:

element.addEventListener(event, handler, options);
  • event — название события (например, 'click').
  • handler — функция, которая выполнится при событии.
  • options — необязательные параметры (например, { once: true } для однократного срабатывания).

Пример:

const button = document.querySelector('#myButton');

function showMessage() {
  console.log('Сообщение после клика!');
}

button.addEventListener('click', showMessage);

removeEventListener()

Чтобы удалить обработчик, нужно передать те же аргументы, что и в addEventListener():

button.removeEventListener('click', showMessage);

Функция-обработчик должна быть сохранена в переменной, иначе удаление не сработает.

Практические задачи

Задача 1: Кнопка-счетчик

Создайте кнопку, которая увеличивает счетчик при каждом клике.

<button id="counterBtn">Кликов: 0</button>
<script>
  let count = 0;
  const btn = document.getElementById('counterBtn');

  btn.addEventListener('click', function() {
    count++;
    this.textContent = `Кликов: ${count}`;
  });
</script>

Задача 2: Появление подсказки

При наведении на иконку «?» показывайте подсказку, а при уходе курсора скрывайте.

<span class="hint">?</span>
<div class="tooltip">Это подсказка!</div>

<script>
  const hint = document.querySelector('.hint');
  const tooltip = document.querySelector('.tooltip');

  hint.addEventListener('mouseover', () => {
    tooltip.style.visibility = 'visible';
  });

  hint.addEventListener('mouseout', () => {
    tooltip.style.visibility = 'hidden';
  });
</script>

Задача 3: Закрытие модального окна

Сделайте так, чтобы модальное окно закрывалось при клике вне его области.

const modal = document.querySelector('.modal');

window.addEventListener('click', function(event) {
  if (event.target === modal) {
    modal.style.display = 'none';
  }
});

Советы

  1. Именуйте обработчики. Если функция используется в removeEventListener, объявите её отдельно, а не анонимно.
  2. Оптимизируйте скролл. Событие scroll срабатывает очень часто, используйте «троттлинг» (например, setTimeout), чтобы снизить нагрузку.
  3. Практикуйтесь. Создавайте мини-проекты: интерактивные формы, слайдеры, игры. Это лучший способ понять события!

Теперь вы умеете работать с событиями в JavaScript! Это основа для создания динамичных и отзывчивых интерфейсов. В следующих уроках мы будем использовать эти знания для более сложных задач: Drag & Drop, анимаций и работы с формами.

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