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

Что такое объект события? 🎯

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

button.addEventListener('click', function(event) {
  // `event` — это объект события
  console.log(event);
});

🔍 Разбираем ключевые свойства

event.target vs event.currentTarget

target

Указывает на исходный элемент, который вызвал событие. Даже если событие всплывает, target остается неизменным.

currentTarget

Ссылается на текущий элемент, к которому прикреплен обработчик (то есть на тот, который «слушает» событие).

Пример:
Допустим, у нас есть кнопка внутри блока:

<div id="block">
  <button id="button">Нажми меня!</button>
</div>

const block = document.getElementById('block');
block.addEventListener('click', function(event) {
  console.log('target:', event.target.id);      // button
  console.log('currentTarget:', event.currentTarget.id); // block
});

💡 Совет: Если обработчик привязан к родителю, а кликаете по дочернему элементу, target и currentTarget будут разными! Это важно при всплытии событий.

event.type

Содержит тип события в виде строки ('click', 'keydown', 'submit' и т.д.). Полезно, если один обработчик управляет разными событиями.

document.addEventListener('keydown', function(event) {
  if (event.type === 'keydown') {
    console.log('Была нажата клавиша:', event.key);
  }
});

event.preventDefault()

Отменяет стандартное поведение элемента. Например: - Запрещает отправку формы (чтобы обработать её вручную). - Отключает переход по ссылке (<a href="...">).

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault(); // Страница не перезагрузится
  console.log('Клик по ссылке, но без перехода!');
});

⚠️ Важно: Не злоупотребляйте этим методом. Пользователи ожидают привычного поведения элементов!

🛠️ Практика: Создаем интерактивный список

Задача: При клике на элемент списка выводим его текст в консоль, но запрещаем стандартное поведение, если элемент содержит класс .prevent.

<ul id="list">
  <li>Обычный элемент</li>
  <li class="prevent">Элемент с prevent</li>
  <li>Ещё один обычный</li>
</ul>

const list = document.getElementById('list');
list.addEventListener('click', function(event) {
  if (event.target.classList.contains('prevent')) {
    event.preventDefault();
  }
  console.log('Вы кликнули на:', event.target.textContent);
});

💡 Когда использовать stopPropagation()?

Если preventDefault() отменяет действие браузера, то stopPropagation() останавливает всплытие события (но не влияет на стандартное поведение).

document.querySelector('.inner').addEventListener('click', function(event) {
  event.stopPropagation(); // Событие не дойдет до родителя
  console.log('Клик по внутреннему элементу');
});

document.querySelector('.outer').addEventListener('click', function() {
  console.log('Этот код не выполнится!');
});

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

📌 Итоги

• target — исходный элемент, который сгенерировал событие.
• currentTarget — элемент, на котором «висит» обработчик.
• type — тип события ('click', 'scroll' и др.).
• preventDefault() — отмена стандартного поведения (например, отправки формы).
• stopPropagation() — остановка всплытия (если нужно).

Код без понимания этих свойств — как машина без руля. Теперь вы знаете, как управлять событиями осознанно! 🚀

P.S. Если хотите глубже погрузиться в события, посмотрите разборы Данилы Бежина на YouTube. Там есть отличные примеры!