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

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@Pavelius]

Огромное спасибо, как всегда полезно и интересно

[@АлександрКнязев-ю1в]

Хорошее объяснение, отличная чистота поданной информации в речи!

[@ЕлизаветаУсова-ц8г]

Какое классное и простое объяснение!!!

[@smotritelyoutube]

Лайк, тоже интересная тема с событиями. Супер

[@vitkul]

Спасибо. Очень доступно подается информация.

[@nadvoodoo2871]

Отличное объяснение, понятный голос. Подписка

[@mouri_san]

Спасибо, ваши уроки лучшие.

[@biscvie]

Спасибо!

[@miwanjaGR]

Классный роли! 🔥

[@user-ser-vit]

Саша, восхищаюсь твоими знаниями! Скажи пожалуйста, сколько (как долго) ты учился, чтобы так красиво, с глубоким пониманием объяснять материал по JavaScript? Я мечтаю достигнуть такого же уровня!

[@AleksanderLamkov]

Летом 2020-го я мало что понимал в JS, но с горем пополам написал простенькую игрушку. Про это писал в этом телеграмм-посте: t.me/friendlyFrontend/328 (там же есть ссылки на репозиторий с кодом того проекта, чтобы оценить уровень, с которого я начинал карьеру) Далее я в течение года на своей первой работе фронтендером писал откровенно плохой JS-код вперемешку с jQuery (старенькая библиотека, упрощающая взаимодействие с JS, без которой раньше было сложно, ну а теперь она практически бесполезна). И вот на втором году своего коммерческого опыта я попадаю на новую работу с настоящим тимлидом фронтендеров в команде. На той новой работе был чистый JS (без фреймворков) и большущая WebPack кастомная сборка. Пришлось за 3 месяца испытательного срока быстро вникнуть в эту всю экосистему. Затем, как мне кажется, за дальнейшие полгода практики мой навык написания JS кода вырос с условных 10% знаний до 70%. В общем, бОльшую часть навыков по этой технологии я получил буквально за 6-9 месяцев упорной работы в команде, где было непрерывное общение с более опытным специалистом и ревью моего кода. Что касается «умения объяснять», то я начинал с ведения трёхмесячных оффлайн курсов по фронтенду для стажеров моей тогдашней компании, где я работал, параллельно писал технические статьи для портала всё той же компании. Ну и вел в формате технического блога телеграмм-канал на 2 читателя (я и подруга, которая заинтересовалась разработкой). Затем 2 года я так или иначе занимался преподаванием - в онлайн-школах и затем через личное менторство.

[@parabletraveller9855]

Чётко! 👍

[@tratmir]

Классное видео!

[@gojo1100]

Александр, спасибо большое за ваши видео. Можете подсказать пожалуйста, сколько еще уроков по JS ожидается? И когда примерно вы планируете разбирать React?

[@AleksanderLamkov]

Спасибо за обратную связь! Будет ещё 9-12 видео в рамках курса в течение 1-1.5 месяца. По React пока нет планов, в следующем году, скорее всего. Советую не дожидаться меня, а глянуть других авторов по реакту, например, UlbiTV.

[@gabbergabberovich]

React теряет востребованность и актуальность. Смотрите в сторону Vue 3 и Vite - это более востребованные и прогрессивные технологии.

[@AleksanderLamkov]

Статистика пока говорит о том, то на React вакансий все же больше.

[@alexdexx21]

Отличное объяснение!👍 Ради любопытства написал свою функцию highlight, и CSS-анимацию нашёл, как прикрутить, и всё было хорошо - до этапа перехвата клика. Потом хитрость с задержкой внутри CSS работать перестала. У тебя там декоратор на highlight с задержкой? Если вдруг интересно, код приложил. ------------- < JS > function highlight(element) { element.classList.add('is-clicked') setTimeout(() => { element.classList.remove('is-clicked') }, 1000); } ------------- < CSS > .box-1 { transition: box-shadow 0.7s 0.3s ease-in-out; } .box-2 { transition: box-shadow 0.7s 0.2s ease-in-out; } .box-3 { transition: box-shadow 0.7s 0.1s ease-in-out; } .is-clicked { box-shadow: 0px 0px 15px 5px white; }

[@AleksanderLamkov]

Да, transition-delay используется у меня. Я набросал функцию на скорую руку сугубо для демонстрации, в реальной практике применять не планировал 😅

[@виртуоз_ру]

Вот прям хорош 👍

[@КириллКараваев-т7ш]

20:50, ide перчеркнула event, потому что его нет в аргументах в функции у второго аргумента addEventListener?

[@AleksanderLamkov]

Верно. И я не знаю почему это сработало 😅

[@peka97ru]

Касаемо stopPropagation - если накинуть три события с клик и только в третьем будет stopPropagation, будет ли всплытие отрабатывать в первых двух? Иными словами имеет ли тут смысл порядок или stopPropagation в одном из событий руинит всё?

[@AleksanderLamkov]

Не будет. Порядок важен.

[@hyperpocket.]

@@AleksanderLamkov Вызвал stopPropagation на первом, затем на последнем обработчике на одном и том же элементе. В итоге событие ни в каком случае не всплыло, либо я что-то не так понял

[@AleksanderLamkov]

Я напутал. Метод stopPropagation, вызванный в одной из функций обработчиков события, заруинит все остальные обработчики ТОЛЬКО, если у соответствующего addEventListener был указан третий аргумент как true или { capture: true }, то есть если функция триггернулась на фазе погружения события.

[@РомаАбаров-ь2б]

20:34 забыл event в параметрах функции

[@AleksanderLamkov]

Спасибо за внимательность! Да, тоже заметил на монтаже, но почему-то код продолжает работать. Вроде как браузер должен кричать в консоли об ошибке, мол, event is undefined. Очень странно 😅

[@locktar-o-dark5664]

14:13 в обеих случаях 😅

[@AleksanderLamkov]

Байт на комменты, получается 🙂