Разбираемся зачем нужен event.currentTarget!

При работе с событиями многие используют event.target и не задумываются, что это не всегда тот элемент, на который был повешен обработчик.

Например:

<button class="btn">
  <span>Сохранить</span>
</button>

Повесим обработчик на кнопку:

button.addEventListener('click', (event) => {
  console.log(event.target);
});

Если кликнуть по тексту внутри span, то в консоль попадёт именно span, а не button.

Потому что event.target всегда указывает на элемент, который стал источником события.

Теперь выведем имя тега:

button.addEventListener('click', (event) => {
  console.log(event.target.tagName);
});

Клик по кнопке даст такой результат: BUTTON. А клик по тексту внутри span даст: SPAN.

Из-за этого иногда появляются неожиданные баги:

button.addEventListener('click', (event) => {
  event.target.disabled = true;
});

Если событие пришло от вложенного элемента, код будет работать не с кнопкой, а с этим элементом. В результате можно случайно изменить не тот элемент или получить неожиданный результат.

В таких ситуациях обычно нужен event.currentTarget:

button.addEventListener('click', (event) => {
  console.log(event.currentTarget);
});

currentTarget всегда содержит элемент, на котором сейчас выполняется обработчик.

То есть:

button.addEventListener('click', (event) => {
  console.log(event.target);
  console.log(event.currentTarget);
});

При клике по span первым будет исходный элемент события:

event.target — span

А вторым — элемент, на котором выполняется обработчик:

event.currentTarget — button

Особенно хорошо разница видна при делегировании событий:

list.addEventListener('click', (event) => {
  console.log(event.target);
  console.log(event.currentTarget);
});

Здесь currentTarget всегда будет ссылаться на list, независимо от того, по какому дочернему элементу кликнули.

Ещё один момент: currentTarget существует только во время обработки события.

const saved = event.currentTarget;

После завершения обработки значение event.currentTarget становится null. Поэтому если ссылка нужна позже — её стоит сохранить заранее.

🔥 Простое правило: target отвечает на вопрос «какой элемент стал источником события», а currentTarget — «на каком элементе сейчас выполняется обработчик». Понимание этой разницы помогает избежать множества мелких ошибок при работе с DOM-событиями.

📣 Code Ready | #практика

💅 Frontend Stuff — коллекция полезных ресурсов для frontend-разработчиков!

На сайте собрана большая база материалов для JavaScript-разработчиков: статьи, библиотеки, фреймворки, инструменты, полезные сервисы и обучающие ресурсы. От базовых инструментов до React, Vue, Node.js и др. Отличный ресурс для веб-разработчиков, которые хотят ускорить работу или найти новые инструменты.

📌 Оставляю ссылочку: frontend-stuff.com

📣 Code Ready | #сайт

✍️ Нашёл полезную статью на Хабре про современные возможности CSS, которые позволяют избавиться от старых костылей и писать код проще!

В этой статье:
• Показано, как решить проблему прыгающего контента через scrollbar-gutter;
• Разбираются современные CSS-возможности: system-ui, light-dark(), margin-inline и align-content;
• Объясняется, как сделать код чище, короче и удобнее для поддержки без лишних Flexbox и Grid-конструкций.


🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

Маленькая UI-деталь, которая влияет на восприятие интерфейса!

Часто бывает: кликаешь по button, tab, dropdown-item или card-action и выделяется текст.

Интерфейс сразу выглядит менее качественным.

.button {
  user-select: none;
}

Теперь текст внутри элемента нельзя случайно выделить мышью или тапом.

Это особенно полезно для интерактивных элементов.

button,
.tab,
.badge {
  user-select: none;
}

Но важно не применять это глобально.

body {
  user-select: none;
}

Так можно сломать UX: пользователь не сможет копировать текст.

Используй только там, где выделение реально не нужно.

button,
.control,
.action

Это маленькая деталь, но она заметно улучшает UI.

🔥 user-select: none — простой способ сделать интерфейс визуально чище и приятнее.

📣 Code Ready | #совет

😍 dreamDevTeamx — большая шпаргалка для фронтенд разработчиков!

Годный репозиторий, в котором собрано много практической информации по разным направлениям разработки. Это база знаний, к которой удобно возвращаться во время обучения, работы или подготовки к собеседованиям. Материал ориентирован именно на практику.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

Почему querySelectorAll() не обновляется автоматически?

Иногда кажется, что результат querySelectorAll() как-то привязан к DOM и должен сам обновляться при изменениях на странице. Но это не так — он возвращает фиксированный снимок на момент вызова.

const items = document.querySelectorAll('.item');

console.log(items.length); // 3

document.body.insertAdjacentHTML(
  'beforeend',
  '<div class="item"></div>'
);

console.log(items.length); // всё ещё 3

После этого items никак не пересчитывается. Это просто сохранённый результат поиска, а не живая коллекция.

Если нужен актуальный список — придётся заново выполнить запрос:

let items = document.querySelectorAll('.item');

document.body.insertAdjacentHTML(
  'beforeend',
  '<div class="item"></div>'
);

items = document.querySelectorAll('.item');

console.log(items.length); // 4

Из-за этого иногда появляются простые, но неприятные ошибки в динамическом UI. Например, когда элементы добавляются позже, а список уже был сохранён заранее:

const buttons = document.querySelectorAll('.btn');

addNewButton();

// новый элемент сюда уже не попадёт
buttons.forEach(bindHandler);

Человек ожидает, что обработчик навесится на всё, но фактически работает только с тем, что существовало в момент запроса.

Есть и другой вариант поведения — живые коллекции. Например:

const items = document.getElementsByClassName('item');

console.log(items.length); // 3

document.body.insertAdjacentHTML(
  'beforeend',
  '<div class="item"></div>'
);

console.log(items.length); // 4

Такие коллекции действительно меняются вместе с DOM. К ним относятся getElementsByClassName, getElementsByTagName и element.children. Разница простая: querySelectorAll даёт снимок, а getElementsBy* держат связь с DOM.

При этом NodeList, который возвращает querySelectorAll, можно спокойно перебирать как массив:

const items = document.querySelectorAll('.item');

items.forEach(item => {
  console.log(item);
});

Но это всё ещё не массив:

Array.isArray(items); // false

Если нужны методы массива — его нужно явно преобразовать:

const items = [...document.querySelectorAll('.item')];

🔥 На практике querySelectorAll используют чаще именно из-за предсказуемости. Он не меняется сам по себе, и это как раз удобно в реальных приложениях. Для динамики обычно либо делают повторный запрос, либо уходят в делегирование событий.

📣 Code Ready | #практика

📂 Напоминалка по аутентификации и авторизации в вебе!

Например, Session-cookie хранит состояние на сервере и использует session_id в cookie браузера, тогда как Token-based подход переносит хранение состояния на клиент и отправляет токен в каждом запросе.

На картинке показаны основные механизмы: классические session-cookie, токены и JWT, а также SSO для единого входа и OAuth 2.0 с различными grant flow, которые используются для разных типов приложений — web, mobile и server-to-server.

Сохрани, чтобы не потерять!

📣 Code Ready | #ресурс

🐱 html-cheatsheet-rus — полезнейшая шпаргалка по HTML!

Крутой материал для тех, кто изучает frontend или хочет быстро освежить базу по HTML. Здесь собрана действительно большая база — от структуры HTML-документа, тегов и атрибутов до форм, семантической вёрстки, мультимедиа, HTML5 API и accessibility.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий