Базовые события: addEventListener

Событие — это уведомление о том, что произошло действие (клик, ввод текста, наведение мыши). addEventListener позволяет подписаться на событие. event.target — элемент, на котором событие произошло. event.currentTarget — элемент, на котором висит listener. removeEventListener требует ту же самую ссылку на функцию.

Три ключевых понятия:

• Event — объект, описывающий действие (click, input, submit и т.д.)
• Event handler — функция, которая реагирует на событие
• Event listener — связь между событием и handler (создаётся через addEventListener)

Синтаксис: element.addEventListener('click', handler);

Аргументы:

• тип события ('click', 'input', 'submit')
• функция-обработчик
• необязательный объект опций

event объект содержит:

• event.type — тип события ('click')
• event.target — элемент, на котором СЛУЧИЛОСЬ событие
• event.currentTarget — элемент, на котором СЛУШАЕМ событие
• event.timeStamp — время возникновения
• event.defaultPrevented — был ли вызван preventDefault

Разница target vs currentTarget:

<div id="outer"> <button>Нажми</button> </div>

document.getElementById('outer').addEventListener('click', (e) => { console.log(e.target); // <button>Нажми</button> console.log(e.currentTarget); // <div id="outer"> });

target — кнопка (где кликнули). currentTarget — div (где висит listener).

Удаление listener:

function handleClick() { console.log('Клик!'); }

button.addEventListener('click', handleClick); button.removeEventListener('click', handleClick); // работает!

Важно: removeEventListener требует ТУ ЖЕ ссылку на функцию.

// НЕ работает: button.addEventListener('click', () => console.log('a')); button.removeEventListener('click', () => console.log('a')); // Это РАЗНЫЕ функции!

Опции: button.addEventListener('click', handler, { once: true, // вызвать только один раз capture: true, // слушать на фазе capture passive: true // listener не вызовет preventDefault (оптимизация) });

addEventListener — как повесить объявление на двери: «Когда произойдёт X, позвоните мне». Вы говорите: «Эй, кнопка, когда кто-то кликнет — вызови эту функцию». event.target — это тот, кто постучал (пользователь кликнул на кнопку). event.currentTarget — это та дверь, на которой висит объявление (элемент с listener).

**Самый простой:**

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

button.addEventListener('click', () => {
  console.log('Кнопка нажата!');
});

Простейший listener: при клике на кнопку — вывод сообщения.

**Простой:**

const button = document.querySelector('button');
let count = 0;

function handleClick() {
  count++;
  button.textContent = `Кликов: ${count}`;
}

button.addEventListener('click', handleClick);
// Кнопка: «Кликов: 1», «Кликов: 2», ...

// Позже можно снять listener:
// button.removeEventListener('click', handleClick);

Счётчик кликов. Именованная функция позволяет потом удалить listener.

**Реальный пример:**

const input = document.querySelector('#name-input');
const output = document.querySelector('#output');

function handleInput(event) {
  const value = event.target.value;
  output.textContent = `Вы написали: ${value}`;
}

input.addEventListener('input', handleInput);

// Добавляем и удаляем listener по условию:
let tracking = true;

function toggleTracking() {
  if (tracking) {
    input.removeEventListener('input', handleInput);
    tracking = false;
  } else {
    input.addEventListener('input', handleInput);
    tracking = true;
  }
}

Динамическое управление listener: добавляем и удаляем при необходимости.

**Неправильно:** Создавать новую функцию при удалении listener

**Почему:** removeEventListener ищет ТУ ЖЕ ссылку на функцию. Новая стрелочная функция — это другой объект.

**Правильно:** Используйте именованную функцию для обоих: addEventListener и removeEventListener.

**Неправильно:** Путать event.target и event.currentTarget

**Почему:** target — элемент, на котором произошло событие. currentTarget — элемент, на котором висит listener.

**Правильно:** Представьте: target — тот, кто постучал. currentTarget — та дверь, у которой стоит охранник.

**Неправильно:** Забывать, что addEventListener не заменяет предыдущий listener

**Почему:** addEventListener добавляет ЕЩЁ ОДИН listener. Два клика — два вызова.

**Правильно:** Для замены используйте removeEventListener + addEventListener.

• addEventListener привязывает listener к событию
• event.target — элемент, где событие произошло
• event.currentTarget — элемент, где висит listener
• removeEventListener требует ту же ссылку на функцию
• addEventListener не заменяет — а добавляет listener

Назад: Вы знаете DOM Basics (D1-D8) — вы умеете находить и изменять элементы. Теперь вы заставляете их реагировать на действия пользователя.

Вперёд: Следующий урок (DA2) — как события перемещаются по вложенным элементам: всплытие и погружение.

• MDN: addEventListener
• MDN: введение в события