JavaScript события фокуса: focus и blur, focusin и focusout | Методы focus и blur | activeElement

✏️ Разберём события focus и blur, события взятия элемента в фокус и событие потери фокуса с элемента. Обсудим разницу между похожими на первый взгляд событиями change и blur. Затронем работу со специальными методами focus и blur для программного взятия определенного элемента в фокус и противоположного действия. Изучим события focusin и focusout — похожие на focus и blur, но, в отличии от них, всплывающие по DOM-дереву вверх. Обсудим задачу получения текущего фокусируемого элемента через DevTools и Live Expression выражение document.activeElement. 🔴 Timeline: ▶ 00:00​ | Введение ▶ 00:25​ | События взятия в фокус — focus ▶ 01:59​ | Событие потери фокуса — blur ▶ 02:38​ | События focus и blur на практике ▶ 04:35​ | Методы focus и blur ▶ 06:12​ | События взятия в фокус и потери фокуса — focusin и focusout ▶ 07:52​ | HTML-атрибут tabindex ▶ 09:52​ | Текущий фокусируемый элемент — document.activeElement ▶ 12:19​ | Заключение 📚 Ссылки из видео: ➖ Код из урока: https://github.com/aleksanderlamkov/j... ➖ Документация по JavaScript от MDN: https://developer.mozilla.org/ru/docs... ➖ Русскоязычный справочник по JavaScript Doka: https://doka.guide/js/ ➖ Фундаментальный онлайн учебник по JavaScript: https://learn.javascript.ru/ 💬 Коммьюнити-чат в телеграме (помощь новичкам): https://t.me/FriendlyFrontend 🧑‍💻 Основной телеграм-канал: https://t.me/AleksanderLamkov ❤️ Boosty (поддержать автора): https://boosty.to/friendly-frontend 🗂️ Бесплатные курсы на канале: 🟠 HTML:    • HTML курс 2025   🔵 CSS:    • CSS курс 2025   🟡 JS:    • JavaScript курс 2025   🟢 A11y:    • Accessibility курс 2025   🗺 Frontend Roadmap:    • Frontend Roadmap 2024 | Что должен учить ф...   ⚪️ Мастер-класс по верстке для новичков:    • Адаптивная верстка сайта с нуля для начина...   🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):    • Вёрстка сайта с 0 до результата | HTML, БЭ...   ⚫️ Мастер-класс по верстке с практикой по JavaScript:    • Вёрстка сайта с нуля • HTML, SCSS, JS прак...   🔴 Мастер-класс по верстке на стеке JSX, SCSS, JS, Vite, Minista (SSG), БЭМ: https://stepik.org/a/228315 📌 Автор: ➖ Личный сайт: https://aleksanderlamkov.ru/ ➖ Telegram: https://t.me/AleksanderLamkov ➖ Boosty: https://boosty.to/friendly-frontend ➖ GetMentor: https://getmentor.dev/mentor/aleksand... ➖ Stepik (платные курсы и мастер-классы): https://stepik.org/a/228315 #frontend #фронтенд #js #javascript