События

Событие — это сигнал о том, что на странице что-то произошло: пользователь нажал кнопку, ввёл текст, нажал клавишу. JavaScript может подписаться на событие и выполнить код в ответ. Так страница становится интерактивной.

Клик

Метод addEventListener() принимает название события и функцию, которую нужно вызвать, когда оно произойдёт. Нажмите кнопку в примере:

<button>Нажми меня</button>
 
<script>
  const button = document.querySelector('button');
 
  button.addEventListener('click', () => {
    console.log('Кнопку нажали');
  });
</script>

Функция выполняется при каждом клике. Такую функцию называют обработчиком события.

Изменение страницы по событию

Обычно обработчик что-то меняет на странице. Здесь он увеличивает счётчик и обновляет текст кнопки:

<button>Нажато: 0</button>
 
<script>
  const button = document.querySelector('button');
  let count = 0;
 
  button.addEventListener('click', () => {
    count++;
    button.textContent = `Нажато: ${count}`;
  });
</script>

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

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

<button>Сохранить</button>
<button>Отмена</button>
 
<script>
  for (const button of document.querySelectorAll('button')) {
    button.addEventListener('click', (event) => {
      console.log(event.target.textContent);
    });
  }
</script>

Ввод текста

Событие input срабатывает при каждом изменении поля. Текущий текст поля лежит в свойстве value:

<input placeholder="Ваше имя">
<p id="greeting"></p>
 
<script>
  const input = document.querySelector('input');
  const greeting = document.querySelector('#greeting');
 
  input.addEventListener('input', () => {
    greeting.textContent = `Привет, ${input.value}!`;
  });
</script>

Клавиатура

Событие keydown срабатывает при нажатии клавиши. Какая клавиша нажата, хранит event.key: буква, 'Enter', 'Escape', 'ArrowUp' и так далее. Щёлкните в поле и понажимайте клавиши:

<input placeholder="Нажмите Enter">
 
<script>
  const input = document.querySelector('input');
 
  input.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      console.log(`Отправлено: ${input.value}`);
    }
  });
</script>

Отписка от события

Обработчик можно убрать методом removeEventListener() — ему нужна та же самая функция, поэтому её сохраняют в переменную. А если обработчик нужен лишь один раз, передайте настройку { once: true }:

<button>Получить бонус</button>
 
<script>
  const button = document.querySelector('button');
 
  button.addEventListener('click', () => {
    console.log('Бонус получен');
  }, { once: true });
</script>

Сколько ни нажимай, сообщение появится только один раз.

Частая ошибка

addEventListener() принимает саму функцию, а не результат её вызова. Запись button.addEventListener('click', handle()) выполнит handle сразу, один раз, и при клике ничего не произойдёт. Правильно — без скобок: button.addEventListener('click', handle).