JAVASCRIPT СОБЫТИЯ. addEventListener делегирование. Cобытия мыши клавиатуры загрузки сайта. Практика
Vložit
- čas přidán 16. 06. 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 летним стажем. хочу сказать что у вас талант и хорошие уроки. Классный канал. отличная работа по обучению.
Спасибо! Я рад!
У вас стаж почти столько сколько я живу)
спасибо Жека, прикольное видео, мне кажется его не хватала.👍
Очень качественно, как всегда
Дякую за зрозумілі пояснення!!
Экстаз от обучения - это у Вас на канале. Гениально!!!
Я рад!
Очень полезный и понятный контент. Спасибо.
Преподаватель высшего уровня! Всегда из сложных вещей доносит до самых простых и в результате все складывается по полочкам и запоминается еще лучше.
Очень здорово!
спасибо за хороший бесплатный контент
Спасибо тебе за труды твои, Жека!! Да не видать тебе змеиных укусов на байке и пробитых амортов! Короче продолжай делать отличные IT уроки, спасибо!!👍
Спасибо!
Домашнее задание:
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 вместо оставшегося количества. В чём может быть проблема?
Рука сама тянется поставить лайк)
Спасибо за урок!)
Лайк не глядя. Капитальный красавчик
спаисбо, за обучалки. не простой урок. но полезный, собственно как и все видосики фрилансера.
как обычно все доступно и понятно!нужно больше видео по js!!!!!!!!очень жду
Женя, я тебя люблю. Очень сильно.
великолепное объяснение
Жека, спасибо!🔥👍
Круто.
Спасибо!
Комментарий для продвижения, а также выражения благодарности, спасибо за весь контент, что ты делаешь для нас!
Пожалуйста!
спасибо большое!!!))) уже соскучились по урокам JS
Пожалуйста!
Ну наконец-то)))😍😍😍
Женя ты лучший!
О, я думал а где про события видос, а вот он и появился))))
Да!
Дякую за відео Женя
ты такой крутой, Жека! Благодарю!
Супер, благодарю!
Жекич,спасибо очень полезно
Спасибо большое!
О, да! Как же я ждал этот выпуск! А говорят, что понедельник-день тяжелый!? Так, я полюблю понедельники! Спасибо, Жека, за видео!!!
Пожалуйста!
Отличный урок, спасибо большое за труд.
Спасибо!Вы лучше всех объясняете сложный материал, всё по полочкам👍
Полезно, подробно, доходчиво. Как всегда на уровне))
Спасибо))
Очень полезно👍
Жека, який же ти крутий викладач! Вчу js на платних курсах, і все-рівно дивлюсь твої відоси, бо після них все стає таким простим і зрозумілим 😊 дякую тобі в котрий раз! (Кусаю локті, що не пішла до тебе на курс😢😢😢)
Дякую, іншим разом)
Топ контент, спасибо 🙏🏻
Спасибо, с меня лайк.
Жека, ты - красавчик!!!
Дорогой Евгений Андриканич, позвольте Вам влепить жирнющий лайк за Ваш труд и качественный контент. Вы, как и всегда, остаётесь лучшим.
умеет объяснять, один из немногих на ютубе
Топовый урок!)
По традиции выходит новый ролик захожу и ставлю лайк, даже если не смотрю его, я знаю, что это очередной шедевр
молодец
Ох как я ждал продолжения курса. И как всегда высший класс.
Спасибо! 👍✨
привет.
я embedded, собираюсь перейти в devops с полным осознанием и погружением, поэтому смотрю связку верстка+фронт+бэк+рест в качестве подводящих знаний. может этот путь длинный и надо нырять сразу в клауды, но, уверен, лучше понимать, с кем я буду иметь дело и для кого буду строить архитектуру. посмотрел весь плейлист по верстке, сверстал себе сайт-визитку, закинул на vps.
СПАСИБО за твой огромный труд. особенно за качество подачи, всеоблемлющие заметочки, подробный перебор вручную разных пропертис, тэгов, событий и тд, которые я могу просто посмотреть и часто на опыте даже не повторять. удивляюсь тому, что не ленишься заготовить даже для простых примеров хорошие макеты, а потом еще и хорошо смонтировать видео.
ты лучший! не зря в топах ютуба. как заработаю, обязательно задоначу. а пока лайк, подписка и рекомендую всем друзьям вкатывальщикам в IT)))
качество контента на высоте
Жене привет и Казахстана , спасибо огромное за урок
Жека, контент как всегда на высоте. Темы этого урока прошел давно, но тебя всё равно посмотрел, потому что подача очень доступная и приятная
Ура, наконец-то! ))
Ура!
Спасибо, Вам за ваши труды. Очень хороший канал .
Очень крутой канал, единственный минус нет решенных домашних заданий в исходниках, чтобы можно было сравнить со своим. Начала с html и css и там этого ОЧЕНЬ не хватает :-(
А так в остальном супер.
Если не получается решить какую учебную то задачку по JS, попроси решить charGPT с объяснением как этот код работает и почему.
Жека, делаешь годный контент! Пожалуйста, продолжай!
Продолжаю!
Дякую за відео👍
Спасибо за качественный контент, все на высоте. Как всегда все подробно доходчиво и полезно 👍👍👍
Спасибо огромное!!!!!!!!!!!!!!!!!!!!111
Лайк, комментарий!
Великолепно
Круто 👍
Дякую за відео
Ух ты!!! Javascript!!! Урааа!!! Спасибо Женя! 👍👍👍
Пожалуйста!
Спасибо большое за твои уроки и мотивацию, обучаюсь вместе с тобой уже почти пол года и и постепенно шагаю к своим первым заказам)
Пожалуйста!
дякую за відео!
Лучший из лучших
ответы на все мои вопросы!!!!
Канал топ🔥
Спасибо!
Подробное, четкое, а главное понятное объяснение материала!😎👍
ооо да ,король вернулся👑
Спасибо за Ваш труд. Учусь в Скиллбокс. Но мой куратор дал ссылку на вас, когда я сказала что заданий в уроке маловато)
Спасибо)
😍😍😍
Спасибо!
Пожалуйста!
С каждым уроком всё интереснее и интереснее . Спасибо за такой большой труд и за такую классную подачу!!!
Евгений, спасибо! Урок СУПЕР! Продолжаю учиться.
Боже, как же я залип на 22:46! Я попытался разобраться в записях, и попробовал заменить, во 2м if, .menu на span.
И долго не отдуплял, что if(){} if(){}, это не то же самое что if(){}, else if(){}.
Огромное спасибо Евгению, прямо заставляет скрипеть извилинами!
Продолжайте снимать гайды по JS пожалуйста. Очень вам блогадарен
Благодарю))
Спасибо!!! Ждал именно этого выпуска!! Масса вопросов по обработке событий, и применения решена в выпуске!
Спасибо Жека! Инфа огонь 🔥! Будем учить!!!!
Евгений ты оправдываешь своё имя! Видео очень полезно, хорошие примеры и разделение по смысловым блокам. Отдельное спасибо за методичку, файл *.js, создал библиотеку из таких файлов и обучаюсь по ней языку программирования, смотрю подсказки, когда того требуют обстоятельства. Очень радуюсь новым видео по js, это сравнимо с тем, как-будто приходят обновления для твоей образовательной прошивки, смотрю и чувствую, что становлюсь лучше.😀🤩🥳
Круто! Спасибо! Очень много информации, все четко и понятно, ничего лишнего.