Объект события event в JavaScript

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

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

• Объект event в обработчике
• Свойство event.type
• event.target и event.currentTarget
• Свойства зависят от типа события
• Итого

Объект event в обработчике

Объект события браузер передаёт первым аргументом в функцию-обработчик. Имя параметра можно выбрать любое, но event - привычное и понятное название.

<button class="save-button">Сохранить</button>

const saveButton = document.querySelector('.save-button');

saveButton.addEventListener('click', function (event) {
  console.log(event);
});

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

Свойство event.type

Свойство event.type содержит строку с именем события. В примере выше оно будет равно ‘click’.

saveButton.addEventListener('click', function (event) {
  console.log(event.type); // click
});

event.type особенно полезно, когда одна и та же функция назначена на несколько событий. По этому свойству можно понять, какое именно событие вызвало функцию.

event.target и event.currentTarget

event.target - элемент, на котором началось событие. event.currentTarget - элемент, для которого сейчас выполняется обработчик.

Эти свойства могут совпадать, но это происходит не всегда. Например, внутри кнопки часто есть иконка или отдельный элемент с текстом.

<button class="favorite-button">
  <span class="favorite-button__icon" aria-hidden="true">♥</span>
  В избранное
</button>

const favoriteButton = document.querySelector('.favorite-button');

favoriteButton.addEventListener('click', function (event) {
  console.log(event.target); // span, если кликнули по иконке
  console.log(event.currentTarget); // button
});

Обработчик назначен кнопке, поэтому event.currentTarget всегда будет кнопкой. Если кликнуть по иконке, event.target укажет на вложенный span. При клике по свободной части кнопки оба свойства будут ссылаться на кнопку.

Если код должен изменить элемент, на котором назначен обработчик, используйте event.currentTarget. event.target нужен, когда важно узнать точный вложенный элемент, с которого началось действие.

Например, класс нужно переключать у кнопки, даже если пользователь кликнул по иконке внутри неё.

favoriteButton.addEventListener('click', function (event) {
  event.currentTarget.classList.toggle('is-active');
});

В этом случае класс is-active всегда добавится или удалится у кнопки, а не у её вложенного элемента.

Свойства зависят от типа события

У разных событий есть общие свойства, например type, target и currentTarget. Дополнительные данные зависят от того, какое действие произошло.

• у событий указателя и мыши есть координаты, например clientX и clientY;
• у клавиатурных событий есть key и code;
• если событие произошло на поле ввода, значение поля можно получить через event.target.value.

Не нужно запоминать все свойства заранее. Если встречаете новый тип события, выведите event в консоль и посмотрите, какие данные доступны именно в этом случае.

Итого

Объект event браузер передаёт первым аргументом в обработчик. event.type показывает тип события, event.target - элемент, на котором началось действие, а event.currentTarget - элемент с выполняемым обработчиком. Остальные свойства зависят от конкретного события.