Урок 04

События: основы

Событие — действие, на которое можно реагировать: клик, ввод, загрузка.

addEventListener

const button = document.querySelector('button');

button.addEventListener('click', () => {
    console.log('клик');
});

Аргументы: тип события, обработчик, опции.

Типы событий

Мышь

  • click, dblclick
  • mousedown, mouseup
  • mousemove
  • mouseenter, mouseleave
  • mouseover, mouseout
  • contextmenu

Клавиатура

  • keydown, keyup
  • keypress (устаревшее)

Формы

  • submit
  • change
  • input
  • focus, blur
  • reset

Документ

  • DOMContentLoaded
  • load
  • beforeunload
  • resize, scroll

Другие

  • drag, drop
  • touchstart, touchend
  • pointerdown, pointerup
  • animationstart, transitionend

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

button.addEventListener('click', (event) => {
    console.log(event.type);      // 'click'
    console.log(event.target);    // элемент, где произошло
    console.log(event.currentTarget); // элемент с обработчиком
    console.log(event.clientX);   // координаты
});

Удаление

function handler() {
    console.log('клик');
}

button.addEventListener('click', handler);
button.removeEventListener('click', handler);

Нужна та же функция. Анонимную не удалить.

Опции

button.addEventListener('click', handler, {
    once: true,    // один раз
    capture: true, // фаза перехвата
    passive: true, // не будет preventDefault
    signal: controller.signal,
});

once

button.addEventListener('click', () => {
    console.log('только раз');
}, { once: true });

AbortController

Массовое удаление:

const controller = new AbortController();

button.addEventListener('click', handler, { signal: controller.signal });
link.addEventListener('click', handler, { signal: controller.signal });

controller.abort(); // удаляет все

Несколько обработчиков

button.addEventListener('click', () => console.log('1'));
button.addEventListener('click', () => console.log('2'));
// оба вызовутся

onclick vs addEventListener

button.onclick = handler; // только один
button.onclick = another; // перезапишет

button.addEventListener('click', handler); // несколько
button.addEventListener('click', another); // оба

Всегда используй addEventListener.

Делегирование

Обработчик на родителе вместо детей:

list.addEventListener('click', (event) => {
    if (event.target.matches('li')) {
        console.log('клик по', event.target.textContent);
    }
});

Работает даже для новых элементов.

Итоги

  • addEventListener — современный способ
  • Опции: once, capture, passive, signal
  • removeEventListener требует ту же функцию
  • AbortController для массового удаления
  • Делегирование для динамических списков