Урок 6. События: игра-кликер

До сих пор код выполнялся один раз и заканчивался. Но программы обычно ждут действий человека: нажатия, наведения, ввода. Такие действия называют событиями.

Чтобы отреагировать на событие, элементу «подписывают» функцию:

knopka.addEventListener('click', function () {
  console.log('Нажали!');
});

Читается так: «кнопка, слушай событие click, и когда оно случится — выполни этот код». Код внутри фигурных скобок сам по себе не выполняется — он лежит и ждёт нажатия. Может ждать вечно, если никто не нажмёт.

Разбираем по частям

• addEventListener — «добавить слушателя события»;
• 'click' — какое событие ждём. Бывают ещё 'mouseover' (навели мышь), 'keydown' (нажали клавишу), 'input' (ввели текст);
• function () { ... } — что делать, когда событие случится.

Счётчик

Чтобы кнопка считала, нужна переменная вне функции — иначе счёт будет обнуляться при каждом нажатии:

let schet = 0;

knopka.addEventListener('click', function () {
  schet = schet + 1;
  tablo.textContent = schet;
});

Частые вопросы