Теперь подробно разберём, что означает подобная запись:

button.addEventListener('click', function () {
  // Инструкции
});

1. Элемент

В примере выше button — кнопка, на которой мы будем ждать пользовательское событие (клик, нажатие, ввод). Этот элемент указывается в самом начале.

Далее, через точку, мы добавляем addEventListener. То есть указываем, что хотим добавить «слушатель события».

2. Название события

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

3. Обработчик

Второй параметр addEventListener — функция. Это и есть обработчик события. Внутри этой функции мы указываем, что нужно сделать, когда произойдёт событие, как его нужно обработать. Инструкции внутри этой функции могут быть любыми: можно выводить сообщения в консоль (это может пригодиться при отладке кода), менять классы или содержимое элементов, вызывать другие функции. Внутри это такая же функция, как и любая другая, только с некоторыми особенностями, о которых мы поговорим позже.

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

В итоге всю запись из примера можно прочитать так: добавим обработчик клика на кнопку button. При клике по кнопке должны выполниться какие-то инструкции.

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