Уроки Javascript #2. Объект Event (Событие), Всплытие и Погружение (Фазы Жизненного Цикла События).
Рет қаралды 64,290
3 жыл бұрынМой Telegram: t.me/stackdevru
В первой части видео мы разберемся, что собой представляет объект Событие (Event) в Javascript, и уделим особое внимание его свойствам: target и currentTarget.
Во сторой части видео мы изучим 3 фазы жизненного цикла события в JS:
1) Погружение (capturing phase)
2) Фаза цели (target phase)
3) Фаза всплытия (bubbling phase)
Также будем использовать метод .stopPropagation() для того, чтобы остановить передачу событий между элементами.
Мои Курсы:
Gatsby JS (полный курс): gatsbyjs.ru
React для начинающих: react001.ru
Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog
@maximtantsura7249 3 жыл бұрын
Давно я не встречал такого годного контента! Простым языком, структурировано и без воды 👍👍👍 Еще и голос такой, как будто смотрю MTV)
@stackdev 3 жыл бұрын
Спасибо за поддержку!
@DmitriyDev 3 жыл бұрын
этого урока мне не хватало, вы единственный кто данную тему затронул
@stackdev 3 жыл бұрын
Спасибо!
@radist126 2 жыл бұрын
Так и есть. Афигенный урок
@stackdev 2 жыл бұрын
@@radist126 Спасибо!
@user-rm6kt8mb2k 3 жыл бұрын
Боже! Первый раз в жизни пишу комментарий на ютубе, но это видео реально объяснило то, что я долго не могла понять! Спасибо большое!
@stackdev 3 жыл бұрын
Спасибо!
@novichok3417 10 ай бұрын
@@stackdevВас не задолбали спасибки. Невозможно задать вопрос, посмотреть какие вопросы у тех кто не просто посмотрел видео под пивко
@user-vt1oy5qc6t Жыл бұрын
Спасибо огромное, за столь содержательное и компактное видео! Всё, что нужно, осветили! Очень приятно Вас слушать. Буду смотреть и другие уроки на канале!
@stackdev Жыл бұрын
Спасибо!
@niteilcaesgo2907 Жыл бұрын
Благодарю за такое хорошее объяснение! Читала-читала на разных сайтах, никак не могла понять, а посмотрев Ваше видео, сразу все прояснилось в голове!)
@stackdev Жыл бұрын
Спасибо!
@fantast2568 3 жыл бұрын
Спасибо большое, уникальная подача материала!
@user-qf5vh8yu1i 2 жыл бұрын
Спасибо, Василий. Годнота
@stackdev 2 жыл бұрын
Спасибо!
@delusio5638 Жыл бұрын
спс, доходчиво по событиям
@OlexanderDoliuk Жыл бұрын
Изучаю всё что связано с фронтенд разработкой уже долгое время и смотрел много видосов по js но настолько хорошую подачу материала встречаю впервые, очень всё понятно и легко воспринимается
@stackdev Жыл бұрын
Спасибо!
@bazilio-bazilio 2 жыл бұрын
Василий, сеасибо большое за этот урок. Долгое время не мог понять смысл event, читал много раз, но все равно не понимал. А ты доходчиво и простым язвэыком все объяснил, теперь все понятно. Респектт👍
@stackdev 2 жыл бұрын
Спасибо за комментарий!
@user-mu4my8fq2e Жыл бұрын
Моё почтение!
@vladfolk2418 2 жыл бұрын
Огромнейшее спасибо за видео!
@eclipseweb1419 Жыл бұрын
Василий, спасибо вам огромное! Безумно просто и понятно
@stackdev Жыл бұрын
Спасибо за поддержку!
@Expertdog Жыл бұрын
Благодарю за видео! Почему я сразу не нашел этого видео? Мне понравилось объяснение - все четко подробно и понятно! Благодарю, а то эти всплытия и погружения трудно давались.
@stackdev Жыл бұрын
Спасибо)
@alexforos5425 Жыл бұрын
Спасибо. Просто и понятно!👍
@gritsienkooleg3447 2 жыл бұрын
Очень годно
@user-dl5uu2pl3t 2 жыл бұрын
Урок просто супер! Теперь всё стало понятно почему в javascript именно так обрабатываются события, другого (более лучшего) алгоритма и придумать нельзя.
@stackdev 2 жыл бұрын
Спасибо!
@user-fn5py9tw5f 3 ай бұрын
очень мощное объяснение🤔👍🏼
@vitalygaraev8093 Жыл бұрын
Спасибо! Всё понятно, классное видео. Интересно, что это видео я смотрел месяц назад и задания просто перепечатывал, как машинистка. Прошло время и теперь все понятно))). Так оно, видимо, и происходит, постепенно усваивается.
@stackdev Жыл бұрын
Да да - именно так
@razvalnuy 7 ай бұрын
@anikinae 3 жыл бұрын
Классный урок - все спокойно, понятно и по делу. Спасибо большое!
@stackdev 3 жыл бұрын
Спасибо вам!
@bukanaka 3 жыл бұрын
Очень хорошо объяснил. Спасибо!
@stackdev 3 жыл бұрын
Спасибо!
@user-hi8rw9kk9v 2 жыл бұрын
Очень нравится ваша подача! Оттачиваю свои навыки по каждому из уроков. Смакую!!!
@stackdev 2 жыл бұрын
Спасибо! приятно слышать!
@MrMakob 11 ай бұрын
Спасибо, очень понятно!😊
@user-ie1cg5ur7j 3 жыл бұрын
Вы молодец очень доходчиво объясняете. Постарайтесь продолжать Вашу работу
@stackdev 3 жыл бұрын
Спасибо!
@enigma9445 2 жыл бұрын
Спасибо друг, так понятно все объясняешь 👏
@stackdev 2 жыл бұрын
Спасибо!
@martinsmaliuga2410 2 жыл бұрын
Качественно и понятно. Спасибо!
@stackdev 2 жыл бұрын
Спасибо!
@user-nb7cv5px1v 2 жыл бұрын
Очень доступно! Спасибо!!!!!! как боженька объяснил
@stackdev 2 жыл бұрын
Спасибо!
@programer8 3 жыл бұрын
Очень круто, спасибо!
@stackdev 3 жыл бұрын
Спасибо!
@alexandershcheglov4653 3 жыл бұрын
Спасибо, было очень понятно и полезно.
@stackdev 3 жыл бұрын
Спасибо!
@sashatunik 8 ай бұрын
Учу js после питона. Некоторые вещи кажутся очень неочевидными. Спаибо что помогаете разобраться. 👍
@user-ci7up4xb6t 8 ай бұрын
Здравствуйте! У вас работает этот обработчик событий?
@sashatunik 8 ай бұрын
@@user-ci7up4xb6t нет 😁.
@aleksandrsaponchyk4474 2 жыл бұрын
Отличная подача! Спасибо!
@stackdev 2 жыл бұрын
Спасибо!
@vladimirmaximoff8005 Жыл бұрын
Спасибо))
@zozoukr Жыл бұрын
Еще не было ни одного видео на этом канале, которое бы не оставило ясность в вопросе. Спасибо.
@askoldtsentseusti-1122 2 жыл бұрын
огромное спасибо!! очень помогло в решении простенькой задачи! автору респект =)))
@stackdev 2 жыл бұрын
Спасибо!
@alimax29 2 жыл бұрын
Очень круто ! Спасибо!
@stackdev 2 жыл бұрын
Спасибо!
@examore-lite 2 жыл бұрын
Спасибо большое!
@mariavladlife4429 Жыл бұрын
спасибо!!!
@_Fantom_. Жыл бұрын
Спасибо за отличный урок!
@stackdev Жыл бұрын
Спасибо!
@user-lm9ee1gn5p Жыл бұрын
Спасибо 🙏🏻
@vladvoloshenko5701 2 жыл бұрын
Интересно слушать, спасибо)
@stackdev 2 жыл бұрын
Спасибо!
@-Vladimir-- 2 жыл бұрын
Смотрю третье видео, Вы просто круто объясняете, если кто-то и может делать стоящие уроки то это явно Вы.
@stackdev 2 жыл бұрын
Спасибо!
@therelaxingsound6903 Жыл бұрын
Спасибо! 👏
@vladimerfisher4442 Жыл бұрын
Классно!!!
@stackdev Жыл бұрын
Спасибо!
@cristianojosan1356 2 жыл бұрын
Спосибо огромное!!
@dr_morpho 2 жыл бұрын
Спасибо вам!
@goldparadaise3794 2 жыл бұрын
Очень классно, мучился с event, event.target , тут все понятно стало. Супер, спасибо большое!
@stackdev 2 жыл бұрын
Спасибо!
@obezyankaa4437 Жыл бұрын
спасибо, здорово объясняете !
@stackdev Жыл бұрын
Спасибо!
@yarukolo4285 4 ай бұрын
❤❤❤
@user-sv2uh2pn3v 2 жыл бұрын
Ха, ноль дизлайков, красавчик🔥🔥
@stackdev 2 жыл бұрын
Спасибо!)
@maksymkyryliuk492 Жыл бұрын
А видео очень интересное.👍🏻
@stackdev Жыл бұрын
Спасибо!
@tar7sha 2 жыл бұрын
Приємний голос та подача. Супер🙌
@stackdev 2 жыл бұрын
Спасибо!
@yuriidest208 3 жыл бұрын
poda4a materiala super
@stackdev 3 жыл бұрын
Спасибо!
@Exot1k Жыл бұрын
Лайк и подписка ☝️
@stackdev Жыл бұрын
Спасибо!
@maksymkyryliuk492 Жыл бұрын
Боже, ваш голос будто у Edvard Wolf😱😱😱
@stackdev Жыл бұрын
)
@aianamirai Жыл бұрын
Согласна, что видео не для новичков в программировании и джаваскрипте, точно не урок номер два 😅 Скорее для ребят, которые после курсов не совсем разобрались с темой. Благодаря вам стало ясно, что такое event, и это перестало быть абстрактным словом. Единственное не поняла, каким образом мы останавливаем погружение, если по факту ниже strong ничего нет (нет child elements)
@aianamirai Жыл бұрын
Не хватает только раскрытия того, какие ивенты бывают, и что получается, что в браузере каждый такт происходит ивент, и addEventListener нужен чтобы их поймать и зафиксировать
@stanislavidalgo3661 2 жыл бұрын
very good video
@stackdev 2 жыл бұрын
Thanks!
@user-tc6pi1nc2r Жыл бұрын
like
@catsapp 2 жыл бұрын
Не совсем понятно почему мы, как Вы сказали, кликнули на 1 , когда он находится внутри button. Ведь по сути мы можем не попасть по нему курсором ( на цифру единичку), но попасть на слово Click. Это потому что погружение (capturing) ищет последний элемент в цепочке иерархии? Какое здесь правило?
@TheWayke 5 ай бұрын
Спасибо за видос, возник стыдный вопрос - зачем в практике иногда необходимо останавливать фазу всплытия?
@seron4206 2 жыл бұрын
Здравствуйте, очень хорошо объясняете, можете сказать какая у вас тема в vs code?
@stackdev 2 жыл бұрын
Спасибо. это - Dracula
@igg6158 2 жыл бұрын
После клика по кнопке в консоль вывелось не mausEvent, а PointerEvent. (так же выводит PointerEvent при клике тачпадом и кнопкой тачпада) Это важно или не стоит углубляться пока?
@LionaTomm 3 жыл бұрын
А что не так со ссылками в описании? Спасибо! Коротко и доходчиво
@stackdev 3 жыл бұрын
Привет, спасибо! А что с ними? Вроде работают
@tilegenbakitov9243 2 жыл бұрын
Привет хотел узнать в learn js писали что хорошим тоном считается что функция должна делать одно действия можно ли создать одну функцию function showTarget(event) { console.log(event.currentTarget); } и просто нужному const запускать через showTarget(); DRY или так не будет работать ?
@xOceanSpirit Күн бұрын
надеюсь ты так не делаешь :D
@AndreyShevchenko-jr6ys Жыл бұрын
заголовок видео написан не совсем корректно. сначала идет погружение а потом всплытие. а так все оч круто. спасибо.
@user-ot5tx2oj6l 2 жыл бұрын
Какие-то самостоятельные работы будут?
@stackdev 2 жыл бұрын
Здесь нет. А вот в рамках большого курса - будет много самостоятельных работ (но это пока не скоро)
@user-qj2yg1rn3j 2 жыл бұрын
Подскажите, а где можно потренироваться по задачам js? Вот именно по разным темам, чтобы можно было азделить. Методы массивов, scope и т.д. тлько не предлагайте learnjs...
@stackdev 2 жыл бұрын
Можете у меня посмотреть!
@user-qj2yg1rn3j 2 жыл бұрын
@@stackdev Где?
@stackdev 2 жыл бұрын
@@user-qj2yg1rn3j В плейлисте JS Практика есть парочка видео, 7й Урок Javascript - проект с local storage.... итд
@user-qj2yg1rn3j 2 жыл бұрын
@@stackdev а, так это не то. мне надо что-то nипа codewars
@art-zakladky 4 ай бұрын
ничего не понял, но очень интересно
@alekseybrazhnikow7622 2 жыл бұрын
Что за тема и шрифт для vscode? приятно для глаз)
@stackdev 2 жыл бұрын
Шрифт - Consolas, тема - Dracula
@nefed-L Жыл бұрын
Правда ли что stopPropagation не нужно использовать? Это плохая практика или нет? В учебнике по js написано что не рекомендуется, так как всплытие нам нужно. И обходить его нужно другими способами.
@behindza 2 жыл бұрын
Подскажите что за тема в VS code?
@Nevskij111 2 жыл бұрын
Слишком сложно для меня, только узнал что такое объекты
@deanwichester6412 8 ай бұрын
Почему на 14:18 вывело 1? Мы же остановили погружение .
@myxtaridse 4 ай бұрын
благодаря e.target, который кажет, что инициировало событие
@Nes4- Жыл бұрын
Ребята, если вы начинаете с нуля, видео будет слишком не понятным. Подучите, почитайте и возвращайтесь сюда.
@Form231 7 ай бұрын
Нифига не понял
@Shir4ay 2 жыл бұрын
Непонятно
@biscuitjerry8043 11 ай бұрын
Сложно и непонятно, как эти заклинания и руны вообще нормальный человек может запомнить?
@user-xn2cr5oe4p Жыл бұрын
В самом начале видео вроде все логично и понятно, но к середине видео автор ушел в такие дебри....что к чему и для чего....Как буд-то сам с собой поговорил....И перед другими блогерами козырнул знаниями....А не для новичков создал видео
@404russ Жыл бұрын
много чуши несешь не по теме
@dimabonds9850 3 жыл бұрын
нихрена не понятно
@catsapp 2 жыл бұрын
Сначала изучить переменные функции объекты.
@Rabinovitch777 2 ай бұрын
Если мне нужно слушать только события клика на кнопках или картинках, то зачем мне нужно window.onload и вся эта котовасия со всплытиями/погружениями?
Vasilii Muravev
Рет қаралды 21 М.
Vasilii Muravev
Рет қаралды 160 М.
Oscar's Funny World
Рет қаралды 8 МЛН
JAVASCRIPT СОБЫТИЯ. addEventListener делегирование. Cобытия мыши клавиатуры загрузки сайта. Практика
Фрілансер по життю
Рет қаралды 182 М.
selfedu
Рет қаралды 11 М.
Vasilii Muravev
Рет қаралды 3,4 М.
Pomazkov JS
Рет қаралды 44 М.