Как сделать div интерактивным

Слушай, ну вот представь: у тебя есть этот самый div, простой, как три копейки, стоит себе и молчит, как Герасим из той истории. Нихуя не делает. Скукота, блядь.

А ты хочешь, чтобы он ожил, сука, чтобы с ним можно было взаимодействовать! Чтобы он откликался, блядь, как та самая Муму, когда её зовут. Ну, в хорошем смысле, конечно, не топить потом.

Так вот, смотри, как это делается, ёпта. Всё просто, как два пальца об асфальт.

Первым делом, блядь, наводим красоту и намёки. Через CSS, ясное дело. Нужно, чтобы пользователь своим ебаным глазом-алмазом сразу понял — «а, сюда можно тыкать».

.interactive-div {
  cursor: pointer; /* Вот это, сука, главный намёк! Курсор на мыле становится пальчиком. Сразу ясно — кликабельно. */
  padding: 10px; /* Чтоб не прилипало всё к краям, как говно к лопате */
  background: #eee; /* Фон серенький, нейтральный такой */
  transition: background 0.3s; /* А это магия, блядь! Чтобы цвет менялся не рывком, а плавненько. */
}

.interactive-div:hover {
  background: #ddd; /* Навёл курсор — и уже светлеет! Обратная связь на лицо. */
}

.interactive-div:active {
  background: #ccc; /* А вот это когда зажал и держишь! Нажал — ещё темнее. Во, ёбта, реализм! */
}

А теперь, сука, даём ему мозги! Красота — это хорошо, но чтобы что-то происходило — нужен JavaScript. Без него этот div — как тот немой Герасим, только «Муму» сказать не может.

document.querySelector('.interactive-div').addEventListener('click', () => {
  alert('Div был кликнут!'); // Ну вот, блядь, ожил! Кликнул — он тебе в ответ орет алертом. Можно и не алерт, а что угодно.
});

И ещё, чувак, не забудь про доступность, ёпта! Это важно, хоть все про это и забивают хуй. Есть же люди, которые сайты не глазами, а через скринридеры читают. Для них нужно явно сказать: «Эй, это кнопка, блядь!».

Добавь в разметку: <div class="interactive-div" role="button" tabindex="0">Нажми меня</div>

Вот этот role="button" и tabindex="0" — они как записка от Тургенева: «Чувак, это интерактивный элемент, его можно выбрать с клавиатуры и активировать».

Короче, резюмирую, чтобы в голове осело:

1. cursor: pointer — это святое. Без этого — нихуя не понятно.
2. CSS-переходы (transition) — делают всё гладко и приятно, а не дергано. Разница — как между шёлком и дерюгой.
3. Обработчики событий в JS (addEventListener) — это сами мозги и логика. Что будет, когда пользователь свой хуй... то есть, курсор, наведёт и кликнет.
4. ARIA-атрибуты (role, tabindex) — для совести и для тех, кто по-другому с сайтом работает. Не будь мудаком, как тот барин, добавь.

Вот и вся магия, блядь. Сделал эти шаги — и твой div из немого чурбана превратится в полноценного интерактивного персонажа. Главное — не утопи его потом в озере случайно.