Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
dTub
Скачать

JS Браузерные события: всплытие и погружение, способы обработки событий, отмена всплытия

Автор: Александр Ламков — Friendly Frontend

Загружено: 2024-09-30

Просмотров: 7996

Описание:

✏️ Начинаем знакомиться с браузерными событиями. Разбираем способы добавления обработчиков событий на элементы через атрибуты в разметке, через свойства DOM-элементов, а также через метод addEventListener. Узнаем как удалять обработчики события с элементов через метод removeEventListener. Обсудим объект события event, его свойства target и currentTarget. Затронем контекст this в рамках функции обработчика событий. Разберём важнейшую концепциию всплытия и погружения событий. Научимся прерывать всплытие событий через методы stopPropagation и stopImmediatePropagation.

🔴 Timeline:
▶ 00:00​ | Введение
▶ 00:29​ | События в браузере
▶ 01:30​ | Обработка событий — атрибут в HTML-разметке
▶ 03:25​ | Обработка событий — свойство события у DOM-элемента
▶ 05:22​ | Проблемы обработки событий через HTML-атрибут и свойство события DOM-элемент
▶ 06:24​ | Обработка событий — метод addEventListener
▶ 08:12​ | Удаление события — метод removeEventListener
▶ 10:48​ | Объект события — event
▶ 12:12 | Всплытие и погружение событий
▶ 13:43​ | Целевой элемент всплывающего события — свойство target объекта event
▶ 14:27​ | Свойство currentTarget объекта event
▶ 15:02​ | Контекст this в функции обработчика событий
▶ 15:39​ | Отмена всплытия события — метод stopPropagation
▶ 17:15​ | “Жесткая” отмена всплытия события — метод stopImmediatePropagation
▶ 18:14​ | Фаза погружения события (capturing)
▶ 21:26​ | Заключение

📚 Ссылки из видео:
➖ Документация по 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

JS Браузерные события: всплытие и погружение, способы обработки событий, отмена всплытия

Поделиться в:

Доступные форматы для скачивания:

Скачать видео mp4

  • Информация по загрузке:

Скачать аудио mp3

Похожие видео

array(10) { [0]=> object(stdClass)#7480 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "BY4lw9uykFk" ["related_video_title"]=> string(172) "События JavaScript: делегирование, поведение браузера по умолчанию, генерация собственных событий" ["posted_time"]=> string(27) "8 месяцев назад" ["channelName"]=> string(53) "Александр Ламков — Friendly Frontend" } [1]=> object(stdClass)#7453 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "C7TgmKZRNF4" ["related_video_title"]=> string(123) "JavaScript событийный цикл Event Loop, асинхронный код, промисы (Promise), async / await" ["posted_time"]=> string(28) "10 месяцев назад" ["channelName"]=> string(53) "Александр Ламков — Friendly Frontend" } [2]=> object(stdClass)#7478 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "qSwpnUyd8F4" ["related_video_title"]=> string(88) "Все ЕГО ХОТЯТ, но почему? В чём сила стейблкоинов" ["posted_time"]=> string(23) "8 часов назад" ["channelName"]=> string(17) "Ян 4OURTY4OURTH" } [3]=> object(stdClass)#7485 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "6l6IJLlSoLo" ["related_video_title"]=> string(163) "Пиксели в CSS не нужны — используй Rem! Адаптивный размер шрифта, Sass-миксин и функция Px to Rem" ["posted_time"]=> string(27) "6 месяцев назад" ["channelName"]=> string(53) "Александр Ламков — Friendly Frontend" } [4]=> object(stdClass)#7464 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "01RGJQn-lAY" ["related_video_title"]=> string(74) "JavaScript DOM. Поиск элементов: getElement и querySelector" ["posted_time"]=> string(27) "9 месяцев назад" ["channelName"]=> string(53) "Александр Ламков — Friendly Frontend" } [5]=> object(stdClass)#7482 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "P7JOBxD_EjQ" ["related_video_title"]=> string(117) "🔥Телеграм Бот на Python с нуля! | Telegram Bot на pyTelegramBotAPI для начинающих" ["posted_time"]=> string(21) "8 дней назад" ["channelName"]=> string(72) "Николай Александров | Django телеграм боты" } [6]=> object(stdClass)#7477 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "nWTLJP7BzAc" ["related_video_title"]=> string(95) "Трамп не пощадил лицо Зеленского на Большой Семерке" ["posted_time"]=> string(23) "7 часов назад" ["channelName"]=> string(27) "Анатолий Шарий" } [7]=> object(stdClass)#7487 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "U-qrd7ejXBQ" ["related_video_title"]=> string(117) "Израиль горит — ПВО не справляется, всё рушится | Скотт Риттер" ["posted_time"]=> string(24) "12 часов назад" ["channelName"]=> string(21) "Мысли Вслух" } [8]=> object(stdClass)#7463 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "BmafSwXwyEQ" ["related_video_title"]=> string(133) "Что будет со ВКЛАДАМИ с 1 июля 2025? Новые правила, снижение ставок, налоги..." ["posted_time"]=> string(24) "13 часов назад" ["channelName"]=> string(12) "InvestFuture" } [9]=> object(stdClass)#7481 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "h5GHA1Xb1Aw" ["related_video_title"]=> string(139) "DOM JavaScript: стили и CSS-классы. Свойства style и classList. Управление CSS-переменными в JS." ["posted_time"]=> string(27) "9 месяцев назад" ["channelName"]=> string(53) "Александр Ламков — Friendly Frontend" } }
События JavaScript: делегирование, поведение браузера по умолчанию, генерация собственных событий

События JavaScript: делегирование, поведение браузера по умолчанию, генерация собственных событий

JavaScript событийный цикл Event Loop, асинхронный код, промисы (Promise), async / await

JavaScript событийный цикл Event Loop, асинхронный код, промисы (Promise), async / await

Все ЕГО ХОТЯТ, но почему? В чём сила стейблкоинов

Все ЕГО ХОТЯТ, но почему? В чём сила стейблкоинов

Пиксели в CSS не нужны — используй Rem! Адаптивный размер шрифта, Sass-миксин и функция Px to Rem

Пиксели в CSS не нужны — используй Rem! Адаптивный размер шрифта, Sass-миксин и функция Px to Rem

JavaScript DOM. Поиск элементов: getElement и querySelector

JavaScript DOM. Поиск элементов: getElement и querySelector

🔥Телеграм Бот на Python с нуля! | Telegram Bot на pyTelegramBotAPI для начинающих

🔥Телеграм Бот на Python с нуля! | Telegram Bot на pyTelegramBotAPI для начинающих

Трамп не пощадил лицо Зеленского на Большой Семерке

Трамп не пощадил лицо Зеленского на Большой Семерке

Израиль горит — ПВО не справляется, всё рушится | Скотт Риттер

Израиль горит — ПВО не справляется, всё рушится | Скотт Риттер

Что будет со ВКЛАДАМИ с 1 июля 2025? Новые правила, снижение ставок, налоги...

Что будет со ВКЛАДАМИ с 1 июля 2025? Новые правила, снижение ставок, налоги...

DOM JavaScript: стили и CSS-классы. Свойства style и classList. Управление CSS-переменными в JS.

DOM JavaScript: стили и CSS-классы. Свойства style и classList. Управление CSS-переменными в JS.

© 2025 dtub. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: [email protected]