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

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

const helloButton = document.querySelector("#hello");

helloButton.addEventListener("click", function (event) {
    console.log(event.type);
    console.log(event.target);
});

Если на странице есть кнопка <button id="hello">Поздороваться</button>, то нажатие на неё выведет:

click
<button id="hello">Поздороваться</button>

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

Зачем нужен event.target, если кнопка уже лежит в переменной? Потому что одна функция может обрабатывать несколько элементов, и event.target подсказывает ей, с каким именно она работает сейчас. Вот опрос с двумя кнопками и одним обработчиком:

const answer = document.querySelector("#answer");
const yesButton = document.querySelector("#yes");
const noButton = document.querySelector("#no");

function vote(event) {
    answer.textContent = `Вы проголосовали: ${event.target.textContent}`;
}

yesButton.addEventListener("click", vote);
noButton.addEventListener("click", vote);

Нажатие на «Да» покажет Вы проголосовали: Да, а нажатие на «Нет» — Вы проголосовали: Нет. Функция одна и та же, но каждый раз event.target — это кнопка, на которую нажали. Как вы знаете, функцию передают по имени, без скобок: браузер сам вызовет её и передаст ей объект события.

event.target — такой же элемент, как любой другой, так что у него есть textContent, classList, style и всё остальное, что вы знаете из прошлого урока.