JAVASCRIPT СОБЫТИЯ. addEventListener делегирование. Cобытия мыши клавиатуры загрузки сайта. Практика
Вставка
- Опубліковано 13 чер 2024
- 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
🤟 Живи, а работай в свободное время! ©
🤟 Лайк + коммент === поддержка канала!
🔴 Карта канала: 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
Классный видос, даже на сайте мозилы так подробно не расписано, но мог ещё рассказать про событие input, оно тоже используется очень часто
спасибо за такой подробный урок!
Вашими классными уроками вы отбираете хлеб у всяких там скиллбоксов, гикбрейнсов :D
там таких подробностей нету)
@Начинающий программист в идеале изучать одну и ту же тему из разных источников.
Скиллбокс и рядом не лежал со своим "курсом" по JavaScript.
Это просто идеальный урок для обучения, спасибо большое за труды)
Пожалуйста!
Ооо я ждааал этих девяти утра все выходные. Крутяк. Жека, бро, спасибо, ты лучший.
Пожалуйста!
Я сразу про event не понял, а потом как пооонял, после 4-го просмотра))))
Т.е. переводя на рабоче-крестьянский event - это что-то со свойствами, которые пишутся после точки. И только после того, как это что-то с нужным свойством появляется (т.е. клик по мышке в нужном месте, там где есть указанные нами свойства этого "что-то" после точки), функция выполняется. Плюс ещё можно прилепить к старту функции какое-нибудь уточнение типа closest('button'). Ой блиииин, вроде дошло)
Тяжело быть блондинкой, особенно если ты брюнет)))))
Дякую))))
Я конечно ещё не дошёл до изучения JS, но очень рад что канал развивается и информация на нем актуальна. Жека, тебе респект!
Единственный человек, который нормально рассказал про объект события. Спасибо!
Спасибо огромнейшее за Ваш труд! Более 50% того, что умею, умею благодаря этого потрясающему каналу! Почти научился верстать сайты, одним из них даже уже пользуется моя парикмахерская, в которой я обычно стригусь. Совет для начинающих, которые как и я когда-то не понимал где взять реальный опыт: берёте магазины, кафешки, парикмахерские, услугами которых вы пользуетесь или не пользуетесь, но они вот тут рядом и классные, выясняете, что у них ещё нет своего сайта, и просто делаете им сайт, представляя, что его вам уже заказали.
Чаще всего у маленьких фирм есть инстаграм, но нет сайта. Контент для сайта можно брать прямо из инстаграма. Дизайн? Для начала можно собрать франкештейна из других профессиональных сайтов, идею шапки оттуда, идею какой-то части главной страницы оттуда, свои цветовые решения подходящие к теме сайта и т. д. Покупаете домен, максимально релевантный названию, услуге и т. п. (стоит он может копейки - 150-200 рублей).
Потом можно просто прийти и сказать типа вы знаете, я начинающий программист, вот сделал вам сайт, хотите пользуйтесь, хотите нет. Если вы начинающий, то рекомендую иметь проплаченный хостинг хотя бы на 5 сайтов, чтобы научиться покупать домены, привязывать SSL-сертификаты, тестировать свои работы. Это важно, т. к. вёрстка в режиме разработчика в хром на мобильных устройствах, может немного отличаться когда вы открываете сайт в реальном мобильном устройстве (хотя, может быть это только моё субъективное мнение, но у меня реально было несколько таких случаев).
Предупредите потенциального клиента, что пока их сайт будет будет висеть на вашем хостинге, но если они хотят разместить его как-то по-своему (например для того, чтобы иметь возможность в дальнейшем самим управлять сайтом), то вы можете честно предоставить исходники. Я пока не супер мастер, но даже мне, эта парикмахерская предложила реальные деньги, хотя я и отказался : ) Очень многие маленькие компании хотят себе сайт, но думают, что это капец как дорого, и даже не пытаются. Это золотая жила для начинающих! )
В дальнейшем, у вас в портфолио будут реальные проекты, которыми действительно пользуются люди, а это гораздо интереснее для потенциальных заказчиков, чем просто работы, по скачанным из инета макетам. Эххх, я, конечно, пока недостаточно продвинут, чтобы давать советы.. ещё много чему нужно учиться.. Но надеюсь, эти советы кому-то помогут ) Ещё раз спасибо Жене!
@@bessonniy9208 а как тебе такое илон маск. что сайты потихоньку загнивают.. людям удобнее в инсте сидеть!!!
еще пару лет и останется только инста и приложухи... а про сайты все забудут
Все дуже зрозуміліше стає, після перегляду Ваших уроків! Дякую велике, а то я вже думала, що то не моє, але Ви даєте надію)Дякую велечееезне!!!!!
Спасибо вам огромное за труд!!! Только благодаря вам начало устаканиваться в голове, всегда все доходчиво, по делу, локанично, но достаточно подробно технически чтобы слушатель понял именно принцип работы технологии, а не просто повторил непонятные манипуляции, спасибо большое, человеческое, вы большой человек с большой буквы!!!! Качество контента просто невообразимо, это лучшее что я видел.....
Дякую за приділений час та роз'яснення!
Мы долго ждали очередной урок, но ожидания того стоили)) Спасибо, Жека. Как всегда качество контента на высоте.
Сейчас будут чаще)
По традиции выходит новый ролик захожу и ставлю лайк, даже если не смотрю его, я знаю, что это очередной шедевр
молодец
Дуже дякую, тобі! Супер канал, продовжуй, Божих благословінь тобі!
О, я думал а где про события видос, а вот он и появился))))
Да!
Комментарий для продвижения, а также выражения благодарности, спасибо за весь контент, что ты делаешь для нас!
Пожалуйста!
Преподаватель высшего уровня! Всегда из сложных вещей доносит до самых простых и в результате все складывается по полочкам и запоминается еще лучше.
Добрый день. я разработчик с 15 летним стажем. хочу сказать что у вас талант и хорошие уроки. Классный канал. отличная работа по обучению.
Спасибо! Я рад!
У вас стаж почти столько сколько я живу)
Домашнее задание:
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 всегда пожалуйста)
Рад, что мой код помог тебе!) Держись и не бросай обучение, дальше - лучше! Сделай свое будущее!))
@@DDTInside у меня почему-то когда начинаю вводить символы показывает NaN вместо оставшегося количества. В чём может быть проблема?
Евгений, качество Вашего контента как всегда на высоте!)
Спасибо, стараюсь!
Спасибо тебе за труды твои, Жека!! Да не видать тебе змеиных укусов на байке и пробитых амортов! Короче продолжай делать отличные IT уроки, спасибо!!👍
Спасибо!
великолепное объяснение
О, да! Как же я ждал этот выпуск! А говорят, что понедельник-день тяжелый!? Так, я полюблю понедельники! Спасибо, Жека, за видео!!!
Пожалуйста!
Спасибо!Вы лучше всех объясняете сложный материал, всё по полочкам👍
Спасибо за видео!
Лайк, комментарий!
Передивився, минуло 2 роки. Тоді багато речей було незрозуміло, але все одно цікаво😎
Спасибо, за уроки.
Спасибо за урок. Как всегда очень подробно все разобрано и детально показано. Годнота, что сказать)
Ура, наконец-то! ))
Ура!
Экстаз от обучения - это у Вас на канале. Гениально!!!
Я рад!
Дякую за відео👍
Ну наконец-то)))😍😍😍
Наконец-то новое видео. Спасибо.
Очень полезное видео. Спасибо Жека!
ооо да ,король вернулся👑
Спасибо большое за труд😊
Дорогой Евгений Андриканич, позвольте Вам влепить жирнющий лайк за Ваш труд и качественный контент. Вы, как и всегда, остаётесь лучшим.
привет.
я embedded, собираюсь перейти в devops с полным осознанием и погружением, поэтому смотрю связку верстка+фронт+бэк+рест в качестве подводящих знаний. может этот путь длинный и надо нырять сразу в клауды, но, уверен, лучше понимать, с кем я буду иметь дело и для кого буду строить архитектуру. посмотрел весь плейлист по верстке, сверстал себе сайт-визитку, закинул на vps.
СПАСИБО за твой огромный труд. особенно за качество подачи, всеоблемлющие заметочки, подробный перебор вручную разных пропертис, тэгов, событий и тд, которые я могу просто посмотреть и часто на опыте даже не повторять. удивляюсь тому, что не ленишься заготовить даже для простых примеров хорошие макеты, а потом еще и хорошо смонтировать видео.
ты лучший! не зря в топах ютуба. как заработаю, обязательно задоначу. а пока лайк, подписка и рекомендую всем друзьям вкатывальщикам в IT)))
Спасибо за урок!)
Женя, я тебя люблю. Очень сильно.
Ух ты!!! Javascript!!! Урааа!!! Спасибо Женя! 👍👍👍
Пожалуйста!
Жека, який же ти крутий викладач! Вчу js на платних курсах, і все-рівно дивлюсь твої відоси, бо після них все стає таким простим і зрозумілим 😊 дякую тобі в котрий раз! (Кусаю локті, що не пішла до тебе на курс😢😢😢)
Дякую, іншим разом)
спасибо Жека, прикольное видео, мне кажется его не хватала.👍
Рука сама тянется поставить лайк)
Лайк не глядя. Капитальный красавчик
Очень качественно, как всегда
Дякую за зрозумілі пояснення!!
Очень здорово!
умеет объяснять, один из немногих на ютубе
Жека, спасибо!🔥👍
Спасибо, Вам за ваши труды. Очень хороший канал .
дякую за відео!
Супер, благодарю!
Очень крутой канал, единственный минус нет решенных домашних заданий в исходниках, чтобы можно было сравнить со своим. Начала с html и css и там этого ОЧЕНЬ не хватает :-(
А так в остальном супер.
Если не получается решить какую учебную то задачку по JS, попроси решить charGPT с объяснением как этот код работает и почему.
Спасибо большое!
Женя ты лучший!
Наконец-то видео про события
Очень полезный и понятный контент. Спасибо.
Круто.
Спасибо!
спасибо большое!!!))) уже соскучились по урокам JS
Пожалуйста!
спасибо за хороший бесплатный контент
спаисбо, за обучалки. не простой урок. но полезный, собственно как и все видосики фрилансера.
Дякую за відео
ты такой крутой, Жека! Благодарю!
Жекич,спасибо очень полезно
Полезно, подробно, доходчиво. Как всегда на уровне))
Спасибо))
Очень полезно👍
всё было понятно до этого видео. много раз пересматривала его. Затык. Всё что показано на экране выводится с ошибками у меня. Домашка просто убила.
Спасибо, пошла искать более доступную инфу. Здесь для меня слишком сложно.
Боже, как же я залип на 22:46! Я попытался разобраться в записях, и попробовал заменить, во 2м if, .menu на span.
И долго не отдуплял, что if(){} if(){}, это не то же самое что if(){}, else if(){}.
Огромное спасибо Евгению, прямо заставляет скрипеть извилинами!
Жека, ты - красавчик!!!
Спасибо, с меня лайк.
Отличный урок, спасибо большое за труд.
Спасибо! 👍✨
Лучший из лучших
Спасибо за качественный контент, все на высоте. Как всегда все подробно доходчиво и полезно 👍👍👍
как обычно все доступно и понятно!нужно больше видео по js!!!!!!!!очень жду
Топ контент, спасибо 🙏🏻
Дякую за відео Женя
Топовый урок!)
Уррраааа!!!
Ура!
Великолепно
Супер! но я пока учусь на курсе Жеки по вёрстке. После обязательно вернусь к урокам по жс.
На курсе будем это проходить тоже)
@@FreelancerLifeStyle крутяк!) Кстати курс огонь огненный, всем кто хочет стать спецом рекомендую!
качество контента на высоте
Класс! Как раз вчера пытался разобраться с клавишей Enter! ((
Надеюсь, сейчас будет понятно)
Жене привет и Казахстана , спасибо огромное за урок
Спасибо огромное!!!!!!!!!!!!!!!!!!!!111
Жека, делаешь годный контент! Пожалуйста, продолжай!
Продолжаю!
Ох как я ждал продолжения курса. И как всегда высший класс.
ответы на все мои вопросы!!!!
Жека, контент как всегда на высоте. Темы этого урока прошел давно, но тебя всё равно посмотрел, потому что подача очень доступная и приятная
Круто 👍
Канал топ🔥
Спасибо!
Все, як завжди, чудово. Подяка за структурованість матеріалу
Подробное, четкое, а главное понятное объяснение материала!😎👍
Спасибо!
Пожалуйста!
Спасибо большое Евгений за уроки!!! Видно как вы ответственно, с пониманием и душой подходите к созданию материала! Обещаю, если наступит время, когда я все таки стану веб-разработчиком и заработаю первые деньги, то обязательно буду переводить вам 10% от своей ЗП веб-разработчика в течение полугода, так как благодаря вам, я очень просто осознал многие вещи!! Спасибо вам Евгений! Пока есть такие люди как вы, мы еще можем сделать на Земле рай!
Отлично освежил память :3
Подача на высоте, спасибо!)
У тех кто ставит дизлайки, походу косоглазие или инверсивное зрение...)
Пожалуйста!
Фрилансеееер по жизни, родной , добрый , герой моего пути становления веб дизайнером, спасибо тебе за всё, лучше всех объясняешь
Веб дизайнер?
Благодарю))