Объект события: event.target, event.type, event.preventDefault

1. Что такое объект события в JavaScript

Когда в браузере происходит событие (например, пользователь кликает по кнопке), JavaScript вызывает вашу функцию-обработчик и передаёт ей специальный объект — объект события (обычно его называют event, но имя переменной может быть любым). Этот объект содержит всю информацию о произошедшем событии: кто его вызвал, какой был тип события, дополнительные данные (например, координаты мыши, если это клик), и даже методы для управления поведением браузера.

Вот базовый пример:

<button id="myBtn">Нажми меня!</button>
<script>
  document.getElementById('myBtn').addEventListener('click', function(event) {
    console.log(event); // Здесь мы увидим объект события!
  });
</script>

Когда вы нажимаете на кнопку, в консоль выводится огромный объект — это и есть event.

Почему это важно?

Без объекта события вы бы вообще не знали, кто именно вызвал обработчик, что за событие произошло и где. Это примерно как если бы вы пришли на вечеринку, а вам не сказали, кто вас позвал, где вы находитесь и почему вообще тут собрались. Неудобно, правда?

2. event.target: кто вызвал событие?

Самое первое и, пожалуй, самое полезное свойство объекта события — это event.target.

event.target — это ссылка на тот DOM-элемент, на котором непосредственно произошло событие. То есть, если пользователь кликнул по кнопке, то event.target будет эта самая кнопка.

Пример 1: Определяем, по какой кнопке кликнули

<button class="color-btn">Красный</button>
<button class="color-btn">Зелёный</button>
<button class="color-btn">Синий</button>

const buttons = document.querySelectorAll('.color-btn');
buttons.forEach(btn => {
  btn.addEventListener('click', function(event) {
    console.log('Вы кликнули по кнопке:', event.target.textContent);
    // Можно даже менять стиль самой кнопки!
    event.target.style.backgroundColor = 'yellow';
  });
});

event.target всегда будет именно та кнопка, по которой кликнули, даже если обработчик один на всех.

Аналогия

Представьте, что у вас есть три звонка на двери, каждый ведёт к разной квартире, но все подключены к одному домофону. Когда кто-то звонит, вы по номеру звонка (event.target) понимаете, к кому пришли гости.

Важно!

Если обработчик навешан не на саму кнопку, а на её родителя, а пользователь кликнул по вложенному элементу (например, по иконке внутри кнопки), event.target всё равно будет тот вложенный элемент, по которому реально кликнули.

<button class="color-btn"><span>Красный</span></button>

Если кликнуть по <span>, то event.target будет этот <span>, а не <button>. Это важно для делегирования событий, о чём мы поговорим в будущих лекциях.

3. event.type: какой тип события произошёл?

Следующее полезное свойство — event.type.

event.type — это строка, которая содержит название события, которое произошло: "click", "input", "keydown", "mouseover" и т.д.

Пример 2: Универсальный обработчик для разных событий

const btn = document.getElementById('myBtn');
btn.addEventListener('click', function(event) {
  console.log('Тип события:', event.type); // выведет 'click'
});

btn.addEventListener('mouseover', function(event) {
  console.log('Тип события:', event.type); // выведет 'mouseover'
});

Иногда удобно использовать один и тот же обработчик для разных событий, и внутри функции определять, что именно произошло:

function handler(event) {
  if (event.type === 'click') {
    console.log('Клик!');
  } else if (event.type === 'mouseover') {
    console.log('Навели мышку!');
  }
}

btn.addEventListener('click', handler);
btn.addEventListener('mouseover', handler);

Зачем это нужно?

• Для логирования (записи в консоль, что именно произошло).
• Для универсальных функций, которые могут реагировать на разные типы событий.
• Для отладки: иногда вы не уверены, что за событие сработало.

4. event.preventDefault(): отмена стандартного поведения

Многие элементы в HTML имеют стандартное поведение. Например:

• <a href="#"> по клику пытается перейти по ссылке.
• <form> по отправке перезагружает страницу.
• <input type="checkbox"> меняет своё состояние.

Иногда нам это поведение не нужно — мы хотим полностью контролировать, что произойдёт. Для этого у объекта события есть метод preventDefault().

event.preventDefault() — отменяет стандартное действие браузера для события.

Пример 3: Отключаем переход по ссылке

<a href="https://ya.ru" id="link">Перейти на Яндекс</a>

document.getElementById('link').addEventListener('click', function(event) {
  event.preventDefault(); // Отменяем переход по ссылке
  alert('Переход отменён! Вы остаетесь здесь :)');
});

Теперь при клике на ссылку страница никуда не переходит, а появляется наше сообщение.

Пример 4: Отключаем отправку формы

<form id="myForm">
  <input type="text" name="name" placeholder="Ваше имя">
  <button type="submit">Отправить</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Останавливаем стандартную отправку формы (перезагрузку)
  alert('Форма не отправлена! Но мы всё равно вас любим :)');
});

Когда нужно использовать preventDefault?

• Когда вы хотите обработать событие самостоятельно (например, отправить данные формы через AJAX, а не перезагружать страницу).
• Когда стандартное поведение мешает вашей логике (например, drag&drop, кастомные чекбоксы, выпадающие списки и т.д.).

Важно!

Если не вызвать event.preventDefault(), браузер выполнит стандартное действие, и ваш код может не сработать как задумано.

5. Практика: динамический список с удалением элементов

Давайте сделаем небольшой практический пример, чтобы закрепить всё сразу. Создадим список дел, где каждую задачу можно удалить по клику на крестик.

<ul id="todo-list">
  <li>Купить хлеб <button class="remove-btn">✖</button></li>
  <li>Позвонить маме <button class="remove-btn">✖</button></li>
  <li>Посмотреть лекцию <button class="remove-btn">✖</button></li>
</ul>

// Получаем все кнопки "✖"
const removeButtons = document.querySelectorAll('.remove-btn');

removeButtons.forEach(btn => {
  btn.addEventListener('click', function(event) {
    // event.target — это кнопка "✖"
    // event.target.parentElement — это <li>, который нужно удалить
    event.target.parentElement.remove();
    // Можно даже отменить стандартное действие, если оно есть (на всякий случай)
    event.preventDefault();
  });
});

Теперь при клике на крестик соответствующий пункт исчезает из списка.

6. Ещё немного полезных свойств объекта события

Хотя сегодня мы фокусируемся на target, type и preventDefault, объект события содержит и другие полезные свойства:

• event.currentTarget — элемент, на котором "висит" обработчик (иногда отличается от event.target).
• event.clientX / event.clientY — координаты мыши при событии (для mouse-событий).
• event.key — нажатая клавиша (для keyboard-событий).
• event.defaultPrevented — флаг, был ли вызван preventDefault.

Но не будем забегать вперёд — с этим познакомимся в будущих лекциях!

7. Типичные ошибки при работе с объектом события

Ошибка №1: Не передаём объект события в обработчик

button.addEventListener('click', function() {
  console.log(event.target); // Ошибка! event не определён
});

В этом случае переменная event не объявлена в функции. Нужно обязательно указать параметр:

button.addEventListener('click', function(event) {
  console.log(event.target); // Теперь всё работает!
});

Ошибка №2: Путаем event.target и this

Внутри обычной функции-обработчика (function(event) { ... }) this ссылается на элемент, на котором "висит" обработчик, а event.target — на элемент, по которому реально кликнули (может быть вложенным). Это не всегда одно и то же!

Ошибка №3: Забываем вызвать preventDefault()

Например, пишем обработчик для формы, но забываем отменить стандартное поведение:

form.addEventListener('submit', function(event) {
  // alert срабатывает, но страница всё равно перезагружается!
  alert('Спасибо!');
});

Нужно обязательно добавить event.preventDefault();, иначе браузер отправит форму и перезагрузит страницу.

Ошибка №4: Используем стрелочные функции там, где нужен this

В стрелочных функциях this не ссылается на DOM-элемент, а берётся из внешнего контекста. Если вам нужен именно DOM-элемент, используйте обычную функцию.

button.addEventListener('click', (event) => {
  console.log(this); // Не кнопка!
});