JAVASCRIPT СОБЫТИЯ. addEventListener делегирование. Cобытия мыши клавиатуры загрузки сайта. Практика

Рет қаралды 182,690

Күн бұрын

JAVASCRIPT СОБЫТИЯ. Метод addEventListener и делегирование событий. Cобытия мыши, клавиатуры и загрузки сайта. Практические примеры. Продолжаем изучать JavaScript и сегодня мы разберем одну из самых важных тем - это события. Изучать будем на практических примерах. События - это сигнал поступающий от браузера о том что что-то произошло. Клик мышью, прокрутка скролла, нажатие клавиши, загрузка страницы наконец. Эти и многие другие события мы можем отлавливать и, когда они возникают, выполнять нужные нам действия. Изучим основной способ назначения обработчиков событий при помощи специальных методов addEventListener и removeEventListener. Также поговорим о делегировании событий, событиях мыши клавиатуры, скролла и загрузки страницы.
👉 Файлы урока - fls.guru/files/tutorials/js/j...
👉 Плейлист "Как это сделать?" - • Як це зробити? Туторіа...
👉 Анимация при прокрутке (скролле) страницы: • Анимация при прокрутке...
👉 Lazy Loading (ленивая загрузка) при скролле страницы: • Анимация при прокрутке...
👉 Параллакс эффект при движении мыши и скролле сайта: • Параллакс эффект при д...
👉 Про navigator.sendBeacon(url, data): w3c.github.io/beacon/
💪 Курс по верстке: edu.fls.guru
🤟 БЕСПЛАТНЫЙ курс по верстке сайтов (HTML, CSS, JavaScript): • БЕСПЛАТНЫЙ курс по вер...
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Курс по верстке: edu.fls.guru
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00:00 - Вступление
00:00:27 - Обработчики событий в JS
00:03:46 - Методы addEventListener и removeEventListener
00:09:39 - Объект события
00:12:46 - Всплытие и погружение событий
00:17:41 - Делегирование событий
00:25:23 - Действия браузера по умолчанию
00:28:49 - Основы событий мыши
00:41:52 - Основы событий клавиатуры
00:49:40 - Событие прокрутки страницы
00:52:22 - События загрузки страницы
00:57:35 - Домашка
00:58:04 - Заключение
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

Пікірлер: 327

@FreelancerLifeStyle 2 жыл бұрын

🤟 Лайк + коммент === поддержка канала! 🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/ 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Курс по верстке: edu.fls.guru 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

@iiishred4226 2 жыл бұрын

Классный видос, даже на сайте мозилы так подробно не расписано, но мог ещё рассказать про событие input, оно тоже используется очень часто

@Sha-Kate 2 жыл бұрын

спасибо за такой подробный урок!

@pusika3 2 жыл бұрын

Вашими классными уроками вы отбираете хлеб у всяких там скиллбоксов, гикбрейнсов :D

@BoikoIvan2 2 жыл бұрын

там таких подробностей нету)

@aleksandr95 2 жыл бұрын

@Начинающий программист в идеале изучать одну и ту же тему из разных источников.

@avelo895 27 күн бұрын

Скиллбокс и рядом не лежал со своим "курсом" по JavaScript.

@TypucTFree 2 жыл бұрын

Ооо я ждааал этих девяти утра все выходные. Крутяк. Жека, бро, спасибо, ты лучший.

@FreelancerLifeStyle 2 жыл бұрын

Пожалуйста!

@Goshan-kw1xs 2 жыл бұрын

Это просто идеальный урок для обучения, спасибо большое за труды)

@FreelancerLifeStyle 2 жыл бұрын

Пожалуйста!

@Xyjail Жыл бұрын

Я сразу про event не понял, а потом как пооонял, после 4-го просмотра)))) Т.е. переводя на рабоче-крестьянский event - это что-то со свойствами, которые пишутся после точки. И только после того, как это что-то с нужным свойством появляется (т.е. клик по мышке в нужном месте, там где есть указанные нами свойства этого "что-то" после точки), функция выполняется. Плюс ещё можно прилепить к старту функции какое-нибудь уточнение типа closest('button'). Ой блиииин, вроде дошло) Тяжело быть блондинкой, особенно если ты брюнет))))) Дякую))))

@Burbon211 Жыл бұрын

Единственный человек, который нормально рассказал про объект события. Спасибо!

@welfiersn416 2 жыл бұрын

Комментарий для продвижения, а также выражения благодарности, спасибо за весь контент, что ты делаешь для нас!

@FreelancerLifeStyle 2 жыл бұрын

Пожалуйста!

@starushkasyu4697 2 жыл бұрын

Я конечно ещё не дошёл до изучения JS, но очень рад что канал развивается и информация на нем актуальна. Жека, тебе респект!

@user-hp2xs9qu6g 2 жыл бұрын

По традиции выходит новый ролик захожу и ставлю лайк, даже если не смотрю его, я знаю, что это очередной шедевр

@user-xc5do8in8k 2 жыл бұрын

молодец

@user-od3el6od3p 2 жыл бұрын

Спасибо вам огромное за труд!!! Только благодаря вам начало устаканиваться в голове, всегда все доходчиво, по делу, локанично, но достаточно подробно технически чтобы слушатель понял именно принцип работы технологии, а не просто повторил непонятные манипуляции, спасибо большое, человеческое, вы большой человек с большой буквы!!!! Качество контента просто невообразимо, это лучшее что я видел.....

@lazylemur7761 2 жыл бұрын

Преподаватель высшего уровня! Всегда из сложных вещей доносит до самых простых и в результате все складывается по полочкам и запоминается еще лучше.

@user-tc6pi1nc2r 2 жыл бұрын

Лайк, комментарий!

@AngelA-iz4hm 2 жыл бұрын

Спасибо!Вы лучше всех объясняете сложный материал, всё по полочкам👍

@user-zz1ys1pk9t Жыл бұрын

Все дуже зрозуміліше стає, після перегляду Ваших уроків! Дякую велике, а то я вже думала, що то не моє, але Ви даєте надію)Дякую велечееезне!!!!!

@user-qr9xl1bj1l 2 жыл бұрын

Наконец-то видео про события

@HoneyQumo 2 жыл бұрын

О, я думал а где про события видос, а вот он и появился))))

@FreelancerLifeStyle 2 жыл бұрын

Да!

@roman-_-novikov 2 жыл бұрын

Спасибо за урок. Как всегда очень подробно все разобрано и детально показано. Годнота, что сказать)

@igorfeticov 2 жыл бұрын

Мы долго ждали очередной урок, но ожидания того стоили)) Спасибо, Жека. Как всегда качество контента на высоте.

@FreelancerLifeStyle 2 жыл бұрын

Сейчас будут чаще)

@deniskotov 2 жыл бұрын

Ура, наконец-то! ))

@FreelancerLifeStyle 2 жыл бұрын

Ура!

@user-ex4qq4yx1p 8 ай бұрын

Дуже дякую, тобі! Супер канал, продовжуй, Божих благословінь тобі!

@Badbsbbsbsbsbsbsbdbdbe11 Жыл бұрын

Дякую за приділений час та роз'яснення!

@user-qn7zf9js3y 2 жыл бұрын

О, да! Как же я ждал этот выпуск! А говорят, что понедельник-день тяжелый!? Так, я полюблю понедельники! Спасибо, Жека, за видео!!!

@FreelancerLifeStyle 2 жыл бұрын

Пожалуйста!

@user-hb5ul2jx6p 2 жыл бұрын

Спасибо, Вам за ваши труды. Очень хороший канал .

@niceman5890 2 жыл бұрын

Спасибо за видео!

@Mikhail.tortik001 2 жыл бұрын

Наконец-то новое видео. Спасибо.

@konstantino7016 2 жыл бұрын

Ух ты!!! Javascript!!! Урааа!!! Спасибо Женя! 👍👍👍

@FreelancerLifeStyle 2 жыл бұрын

Пожалуйста!

@user-qv6uu8dl6e 2 жыл бұрын

Евгений, качество Вашего контента как всегда на высоте!)

@FreelancerLifeStyle 2 жыл бұрын

Спасибо, стараюсь!

@craftmoorg 2 жыл бұрын

Очень полезное видео. Спасибо Жека!

@user-yw6zg4zl2l 2 жыл бұрын

Спасибо, за уроки.

@astanchane 7 ай бұрын

великолепное объяснение

@sergeygorec906 2 жыл бұрын

спасибо Жека, прикольное видео, мне кажется его не хватала.👍

@abugsbunny 2 жыл бұрын

Добрый день. я разработчик с 15 летним стажем. хочу сказать что у вас талант и хорошие уроки. Классный канал. отличная работа по обучению.

@FreelancerLifeStyle 2 жыл бұрын

Спасибо! Я рад!

@gdkor Жыл бұрын

У вас стаж почти столько сколько я живу)

@alshabanov 2 жыл бұрын

Полезно, подробно, доходчиво. Как всегда на уровне)) Спасибо))

@shokhrookhr3850 2 жыл бұрын

Ну наконец-то)))😍😍😍

@DKPLETI 2 жыл бұрын

Очень качественно, как всегда

@bessonniy9208 2 жыл бұрын

Спасибо огромнейшее за Ваш труд! Более 50% того, что умею, умею благодаря этого потрясающему каналу! Почти научился верстать сайты, одним из них даже уже пользуется моя парикмахерская, в которой я обычно стригусь. Совет для начинающих, которые как и я когда-то не понимал где взять реальный опыт: берёте магазины, кафешки, парикмахерские, услугами которых вы пользуетесь или не пользуетесь, но они вот тут рядом и классные, выясняете, что у них ещё нет своего сайта, и просто делаете им сайт, представляя, что его вам уже заказали.

@bessonniy9208 2 жыл бұрын

Чаще всего у маленьких фирм есть инстаграм, но нет сайта. Контент для сайта можно брать прямо из инстаграма. Дизайн? Для начала можно собрать франкештейна из других профессиональных сайтов, идею шапки оттуда, идею какой-то части главной страницы оттуда, свои цветовые решения подходящие к теме сайта и т. д. Покупаете домен, максимально релевантный названию, услуге и т. п. (стоит он может копейки - 150-200 рублей).

@bessonniy9208 2 жыл бұрын

Потом можно просто прийти и сказать типа вы знаете, я начинающий программист, вот сделал вам сайт, хотите пользуйтесь, хотите нет. Если вы начинающий, то рекомендую иметь проплаченный хостинг хотя бы на 5 сайтов, чтобы научиться покупать домены, привязывать SSL-сертификаты, тестировать свои работы. Это важно, т. к. вёрстка в режиме разработчика в хром на мобильных устройствах, может немного отличаться когда вы открываете сайт в реальном мобильном устройстве (хотя, может быть это только моё субъективное мнение, но у меня реально было несколько таких случаев).

@bessonniy9208 2 жыл бұрын

Предупредите потенциального клиента, что пока их сайт будет будет висеть на вашем хостинге, но если они хотят разместить его как-то по-своему (например для того, чтобы иметь возможность в дальнейшем самим управлять сайтом), то вы можете честно предоставить исходники. Я пока не супер мастер, но даже мне, эта парикмахерская предложила реальные деньги, хотя я и отказался : ) Очень многие маленькие компании хотят себе сайт, но думают, что это капец как дорого, и даже не пытаются. Это золотая жила для начинающих! )

@bessonniy9208 2 жыл бұрын

В дальнейшем, у вас в портфолио будут реальные проекты, которыми действительно пользуются люди, а это гораздо интереснее для потенциальных заказчиков, чем просто работы, по скачанным из инета макетам. Эххх, я, конечно, пока недостаточно продвинут, чтобы давать советы.. ещё много чему нужно учиться.. Но надеюсь, эти советы кому-то помогут ) Ещё раз спасибо Жене!

@ELpazik 2 жыл бұрын

@@bessonniy9208 а как тебе такое илон маск. что сайты потихоньку загнивают.. людям удобнее в инсте сидеть!!! еще пару лет и останется только инста и приложухи... а про сайты все забудут

@BMikel 2 жыл бұрын

Отличный урок, спасибо большое за труд.

@user-vt9wm8pk5n 2 жыл бұрын

Спасибо за качественный контент, все на высоте. Как всегда все подробно доходчиво и полезно 👍👍👍

@user-nj8cc8px8o 2 жыл бұрын

Ох как я ждал продолжения курса. И как всегда высший класс.

@viktorkovalets5422 2 жыл бұрын

Лайк не глядя. Капитальный красавчик

@arcadiibabici7655 8 ай бұрын

Спасибо большое за труд😊

@sergeyecho127 2 жыл бұрын

Женя, я тебя люблю. Очень сильно.

@KomAlexei 2 жыл бұрын

Очень здорово!

@user-kq5ow1zv3m Жыл бұрын

как обычно все доступно и понятно!нужно больше видео по js!!!!!!!!очень жду

@rasul3d Жыл бұрын

Очень полезный и понятный контент. Спасибо.

@user-ym8mg1wi8t 2 жыл бұрын

Жека, спасибо!🔥👍

@ersultan_boken5617 2 жыл бұрын

ооо да ,король вернулся👑

@serjdenisov2114 2 жыл бұрын

Круто. Спасибо!

@gocik9262 2 жыл бұрын

Рука сама тянется поставить лайк)

@gud8359 2 жыл бұрын

Спасибо тебе за труды твои, Жека!! Да не видать тебе змеиных укусов на байке и пробитых амортов! Короче продолжай делать отличные IT уроки, спасибо!!👍

@FreelancerLifeStyle 2 жыл бұрын

Спасибо!

@polarbearprogramming Жыл бұрын

спасибо за хороший бесплатный контент

@user-jj6cj4rw8n 2 ай бұрын

Передивився, минуло 2 роки. Тоді багато речей було незрозуміло, але все одно цікаво😎

@astaroth3481 2 жыл бұрын

Жека, контент как всегда на высоте. Темы этого урока прошел давно, но тебя всё равно посмотрел, потому что подача очень доступная и приятная

@JavaScriptcher 2 жыл бұрын

Подробное, четкое, а главное понятное объяснение материала!😎👍

@platonyunkov161 2 жыл бұрын

спаисбо, за обучалки. не простой урок. но полезный, собственно как и все видосики фрилансера.

@zam4764 2 жыл бұрын

Спасибо за урок!)

@artem_doronin 2 жыл бұрын

ты такой крутой, Жека! Благодарю!

@ivanka6342 Жыл бұрын

привет. я embedded, собираюсь перейти в devops с полным осознанием и погружением, поэтому смотрю связку верстка+фронт+бэк+рест в качестве подводящих знаний. может этот путь длинный и надо нырять сразу в клауды, но, уверен, лучше понимать, с кем я буду иметь дело и для кого буду строить архитектуру. посмотрел весь плейлист по верстке, сверстал себе сайт-визитку, закинул на vps. СПАСИБО за твой огромный труд. особенно за качество подачи, всеоблемлющие заметочки, подробный перебор вручную разных пропертис, тэгов, событий и тд, которые я могу просто посмотреть и часто на опыте даже не повторять. удивляюсь тому, что не ленишься заготовить даже для простых примеров хорошие макеты, а потом еще и хорошо смонтировать видео. ты лучший! не зря в топах ютуба. как заработаю, обязательно задоначу. а пока лайк, подписка и рекомендую всем друзьям вкатывальщикам в IT)))

@user-ed5db6cn6c 2 жыл бұрын

умеет объяснять, один из немногих на ютубе

@andreasshev5651 2 жыл бұрын

Женя ты лучший!

@user-zp9yx4lw8k 2 жыл бұрын

Экстаз от обучения - это у Вас на канале. Гениально!!!

@FreelancerLifeStyle 2 жыл бұрын

Я рад!

@qwertin1998 2 жыл бұрын

Жекич,спасибо очень полезно

@Code.bless_you 2 жыл бұрын

Дорогой Евгений Андриканич, позвольте Вам влепить жирнющий лайк за Ваш труд и качественный контент. Вы, как и всегда, остаётесь лучшим.

@user-nq3kj4mk3r 2 жыл бұрын

Супер, благодарю!

@KosTHB1 2 жыл бұрын

Жека, ты - красавчик!!!

@DashaG182 2 жыл бұрын

спасибо большое!!!))) уже соскучились по урокам JS

@FreelancerLifeStyle 2 жыл бұрын

Пожалуйста!

@winedst5694 2 жыл бұрын

Спасибо большое!

@oksanakukhotska7190 Жыл бұрын

Дякую за зрозумілі пояснення!!

@allgood2146 2 жыл бұрын

Спасибо большое Евгений за уроки!!! Видно как вы ответственно, с пониманием и душой подходите к созданию материала! Обещаю, если наступит время, когда я все таки стану веб-разработчиком и заработаю первые деньги, то обязательно буду переводить вам 10% от своей ЗП веб-разработчика в течение полугода, так как благодаря вам, я очень просто осознал многие вещи!! Спасибо вам Евгений! Пока есть такие люди как вы, мы еще можем сделать на Земле рай!

@tairxasancanov3862 2 жыл бұрын

качество контента на высоте

@user-lm9ee1gn5p 2 жыл бұрын

Топ контент, спасибо 🙏🏻

@overseer2039 2 жыл бұрын

Спасибо, с меня лайк.

@user-jp5ul9be4j 8 ай бұрын

Жене привет и Казахстана , спасибо огромное за урок

@shoxolimov5439 2 жыл бұрын

Лучший из лучших

@user-lm9ee1gn5p 2 жыл бұрын

Очень полезно👍

@DDTInside 2 жыл бұрын

Домашнее задание: HTML: Открыть поиск Закрыть поиск Поиск Осталось символов. ======================================== CSS: .menu { display: inline-block; } .menu__form-search { display: none; } .search__counter { display: none; } .menu._active .menu__form-search { display: block; } .menu._active .search__counter { display: block; } .menu._active .menu__button span:first-child { display: none; } .menu._active .menu__button span:last-child { display: block; } .menu__button span:first-child { display: block; } .menu__button span:last-child { display: none; } ======================== JavaScript: // Создаю счётчик const txtItem = document.querySelector('.menu__search') const txtItemLimit = txtItem.getAttribute('maxlength') const txtCounter = document.querySelector('.search__counter span') txtCounter.innerHTML = txtItemLimit function txtSetCounter() { const txtCounterResult = txtItemLimit - txtItem.value.length txtCounter.innerHTML = txtCounterResult } txtItem.addEventListener('keyup', txtSetCounter) txtItem.addEventListener('keydown', function (e) { if (e.repeat) { txtSetCounter() } }) // Создаю открывающееся/закрывающееся меню (закрываться будет и при нажатии на Escape) const menuBody = document.querySelector('.menu') function menu(e) { if (e.target.closest('.menu__button')) { menuBody.classList.toggle('_active') } if (!e.target.closest('.menu')) { menuBody.classList.remove('_active') } } document.addEventListener('click', menu) document.addEventListener('keyup', function (e) { if (e.code === 'Escape') { menuBody.classList.remove('_active') } })

@Hamafac 2 жыл бұрын

Дякую. швидше роздуплився завдяки твоєму коду

@DDTInside 2 жыл бұрын

@@Hamafac всегда пожалуйста) Рад, что мой код помог тебе!) Держись и не бросай обучение, дальше - лучше! Сделай свое будущее!))

@stuff5738 Жыл бұрын

@@DDTInside у меня почему-то когда начинаю вводить символы показывает NaN вместо оставшегося количества. В чём может быть проблема?

@MegaTesei 2 жыл бұрын

Евгений ты оправдываешь своё имя! Видео очень полезно, хорошие примеры и разделение по смысловым блокам. Отдельное спасибо за методичку, файл *.js, создал библиотеку из таких файлов и обучаюсь по ней языку программирования, смотрю подсказки, когда того требуют обстоятельства. Очень радуюсь новым видео по js, это сравнимо с тем, как-будто приходят обновления для твоей образовательной прошивки, смотрю и чувствую, что становлюсь лучше.😀🤩🥳

@user-ys3in6qx6f 2 жыл бұрын

Спасибо! 👍✨

@user-lj6is5kn8o 2 жыл бұрын

Топовый урок!)

@952a259 Жыл бұрын

Женя - отличный специалист и классный преподаватель, дуже дякую за урок!

@Dubik_Ks 2 жыл бұрын

ответы на все мои вопросы!!!!

@user-wy1qd5oi3v 2 жыл бұрын

Уррраааа!!!

@FreelancerLifeStyle 2 жыл бұрын

Ура!

@eragons89 2 жыл бұрын

Дякую за відео Женя

@user-cb6ts6zv4p 2 жыл бұрын

Круто! Спасибо! Очень много информации, все четко и понятно, ничего лишнего.

@user-dj7im3wh7v 2 жыл бұрын

Жека, делаешь годный контент! Пожалуйста, продолжай!

@FreelancerLifeStyle 2 жыл бұрын

Продолжаю!

@3abrak Жыл бұрын

С каждым уроком всё интереснее и интереснее . Спасибо за такой большой труд и за такую классную подачу!!!

@alexsen6486 Жыл бұрын

Спасибо огромное!!!!!!!!!!!!!!!!!!!!111

@niteilcaesgo2907 2 жыл бұрын

Спасибо за отличный контент! Ждала продолжения вашего курса по js

@user-qj6rx9zz2l 2 жыл бұрын

Спасибо!!! Ждал именно этого выпуска!! Масса вопросов по обработке событий, и применения решена в выпуске!

@user-ex5bu4kh1o Жыл бұрын

Жека, який же ти крутий викладач! Вчу js на платних курсах, і все-рівно дивлюсь твої відоси, бо після них все стає таким простим і зрозумілим 😊 дякую тобі в котрий раз! (Кусаю локті, що не пішла до тебе на курс😢😢😢)

@FreelancerLifeStyle Жыл бұрын

Дякую, іншим разом)

@lezo 2 жыл бұрын

Все, як завжди, чудово. Подяка за структурованість матеріалу

@user-jc5ck5ph5t 2 жыл бұрын

Большое спасибо! Очень понятное объяснение событий

@user-np9mq5xc7j 2 жыл бұрын

Спасибо Жека! Инфа огонь 🔥! Будем учить!!!!

@user-xr9ux6lp6j 2 жыл бұрын

видео супер, давай дальше про js , а лучше на примере какого-нибудь приложения

@q_loo6342 2 жыл бұрын

Спасибо большое за твои уроки и мотивацию, обучаюсь вместе с тобой уже почти пол года и и постепенно шагаю к своим первым заказам)

@FreelancerLifeStyle 2 жыл бұрын

Пожалуйста!

@aleksandr2236 2 жыл бұрын

Дуже корисно. Дуже зрозуміло. Найзрозуміліше пояснення цієї теми. Дякую!

@xxxan_official 2 жыл бұрын

Как всегда топ. Даешь больше JS! Сколько ни искал, больше достойных русскозычных каналов по вёрстке так и не нашёл. Спасибо за контент, ждём больше инфы по JS. Всегда максимально доступно и понятно.

@FilmsMediaTV Жыл бұрын

19:07 Ору просто с этого момента 😁

@marinaastapenko1839 2 жыл бұрын

Очень крутой канал, единственный минус нет решенных домашних заданий в исходниках, чтобы можно было сравнить со своим. Начала с html и css и там этого ОЧЕНЬ не хватает :-( А так в остальном супер.

@virnus1 Жыл бұрын

Если не получается решить какую учебную то задачку по JS, попроси решить charGPT с объяснением как этот код работает и почему.