run-dev

События в JavaScript: как обрабатывать в JS

События в JavaScript позволяют реагировать на действия пользователя, такие как клики, наведение курсора, нажатие клавиш и другие. Для этого используются обработчики событий, которые вызываются при наступлении определённого события.

Назначение обработчика событий

Метод addEventListener()

Метод addEventListener() позволяет добавить обработчик события на элемент.

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Кнопка нажата");
});

Позволяет добавлять несколько обработчиков для одного события.

Атрибут HTML

Обработчик можно назначить прямо в HTML.

<button onclick="alert('Кнопка нажата')">Нажми меня</button>

Этот способ не рекомендуется, так как усложняет поддержку кода.

Свойство onevent

Обработчик можно задать через свойство onevent.

const button = document.querySelector("button");

button.onclick = () => {
  console.log("Кнопка нажата");
};

Этот метод перезаписывает предыдущий обработчик.

Виды событий

События мыши

  • click – клик по элементу;
  • dblclick – двойной клик;
  • mouseover – наведение курсора;
  • mouseout – уход курсора;
  • mousedown – нажатие кнопки мыши;
  • mouseup – отпускание кнопки мыши.

Пример:

document.addEventListener("mousemove", event => {
  console.log(`Координаты: ${event.clientX}, ${event.clientY}`);
});

События клавиатуры

  • keydown – нажатие клавиши;
  • keyup – отпускание клавиши.

Пример:

document.addEventListener("keydown", event => {
  console.log(`Нажата клавиша: ${event.key}`);
});

События формы

  • submit – отправка формы;
  • input – ввод в поле;
  • change – изменение значения.

Пример:

const input = document.querySelector("input");

input.addEventListener("input", event => {
  console.log(`Введено: ${event.target.value}`);
});

Удаление обработчиков

Для удаления обработчика используется removeEventListener().

function handleClick() {
  console.log("Кнопка нажата");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

Всплытие и погружение

События в JavaScript распространяются в два этапа:

  1. Погружение – от window к целевому элементу.
  2. Всплытие – от целевого элемента обратно к window.
document.body.addEventListener("click", () => {
  console.log("Клик по body");
});

Для остановки всплытия используется event.stopPropagation().

button.addEventListener("click", event => {
  event.stopPropagation();
  console.log("Кнопка нажата");
});

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

Позволяет вешать обработчик на родительский элемент и обрабатывать события его потомков.

document.querySelector(".list").addEventListener("click", event => {
  if (event.target.tagName === "LI") {
    console.log(`Выбран элемент: ${event.target.textContent}`);
  }
});

Больше записей