Урок 37 из 114 · 8 мин

События: клик

addEventListener, событие click, функция-обработчик и removeEventListener.

Кнопка оживает

Ну что, теперь кнопка заработает?
Ника
Да. Говорим браузеру: «когда по кнопке кликнут — вызови эту функцию». Это обработчик события.

Метод

addEventListener()

Что это: el.addEventListener("click", fn) — при каждом клике вызывается fn.
Зачем: Любая реакция на действия пользователя.
Как: JavaScript
let count = 0; const btn = document.querySelector("button"); btn.addEventListener("click", () => { count++; btn.textContent = `В корзине: ${count}`; });
Так это работает

Событие

click

Метод

removeEventListener()

Что это: Убирает обработчик. Нужна та же функция, что передавали в addEventListener.
Зачем: Одноразовые действия.
Как: JavaScript
const btn = document.querySelector("button"); function once() { console.log("Только один раз"); btn.removeEventListener("click", once); } btn.addEventListener("click", once); btn.click(); btn.click();
Так это работает

Ника
Передавай в addEventListener саму функцию, без скобок: addEventListener("click", add).

Ваш ход

Задание

По клику на #add увеличивай count и показывай его в #count.

let count = 0;

let count = 0;

Результат обновляется при вводе

ПрактикаОбязательное задание

Выберите один ответ.

Что не так в btn.addEventListener("click", add())?

Домашнее заданиеДля закрепления

Выберите один ответ.

Сработает ли click у <button>, если нажать Enter на клавиатуре?