Уроки Javascript #1. Обработчик событий - AddEventListener.
HTML-код
- Опубликовано: 18 сен 2024
- Мой Telegram: t.me/stackdevru
В этом видео разбираемся, как работают обработчики событий в JavaScript:
- Как повесить обработчик событий AddEventListener на 1 элемент
- Как повесить обработчики событий AddEventListener на несколько элементов
Любому событию в JS можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло. Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя. Есть несколько способов назначить событию обработчик.
Мои Курсы:
Gatsby JS (полный курс): gatsbyjs.ru
React для начинающих: react001.ru
Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog
Как же здорово получить грамотный ответ на интересующий вопрос без всевозможных кривляний и дурачеств! Спасибо большое за ваш труд!!! Подписка!
Спасибо!
Наконец-то, хоть один человек рассказывает, как JS взаимодействует с элементами сайта. Про сам язык информации много, а как в работе его использовать почти никто не говорит.
+++
великолепные уроки! большое Вам спасибо!!
Спасибо!
Спасибо тебе большущее. Как раз вёрстку закончил учить пришло время js и это лучшее что я нашёл про js ибо я вообще не могу понять этот язык, все доходчиво и плюс минус понятно для меня!
Спасибо!
согласен.
А как же делегирование событий? Можно на блок с кнопками повесить событие и отлавливать на каждом элементе, думаю это тоже нужно было бы озвучить и показать
Ну а так все хорошо и доступно, можно закреплять материал)
Увидел про делегирование в следующем видео))
Все четко и по делу. Видео до 10 мин. самое то.
Спасибо!
Спасибо за отличное объяснение! Все четко!!!
Спасибо!
Плейлист отличный. Добавил себе. Надо обязательно посмотреть!
@catsapp animation Это было аж год назад. Теперь я уже устроился. Даже не помню смотрел или нет.
Спасибо. Super!
Спасибо, неплохой подход! Отлично сделано!
Спасибо!
Спасибо! По делу и без воды.
Спасибо!
спасибо, чётко и понятно.
Спасибо!
Good presentation of the material!
Thanks!
Благодарю за видео!
Спасибо!
Спасибо. Отличное обьяснение.
Спасибо!
Полезные уроки !
Спасибо!
норм, просто и доступно
Спасибо!
Отличное видео, все четко и понятно, подписался.
Спасибо!
очень полезно ) спасибо !
Спасибо!
Спасибо, все понятно)
Спасибо!
Добрый день, спасибо большое, всё супер!
После чего можно приступать к отработке данного материал, что нужно пройти(какой материал? Переменные. функции что ещё?) возможно у вас плей листы?
спасибо! js001.ru/
Василий, вы очень хорошо доносите сложные вещи. Вы не занимаетесь индивидуальным обучением?
как сделать активный класс только одной из нескольких кнопок? чтобы при нажатии на другую кнопку класс автоматически удалялся у уже нажатой кнопки и добавлялся новой? toggle оставляет активный класс у всех нажатых кнопок и их приходится нажимать повторно для отката внешних изменений
заведи переменную, где будешь хранить кнопку, с которой нужно снять активный класс. при клике по другой снимаешь с той, что храниться в переменной активный класс, вешаешь активный класс на e.target, кладешь e.target в эту переменную
либо можно циклом пробежаться по коллекции нопок убрав у каждой активный класс. повесив потом его на кнопку, которая e.target
а как добавить на вторую кнопку отдельную команду? Добавить функцию?
А что за стрелочная функция? в чем различия, где можно подробней посмотреть, почитать? Только осваиваю JS
Вот видео про стрелочные функции: ruclips.net/video/j9aK98ESN8g/видео.html
привет! не могу получить ссылку на ваши уроки react001. Не приходит ответ для регистрации на почту. Курс более не доступен?
Все доступно - может быть небольшая задержка из-за почтового сервиса...
@@stackdev все получил
Супер.спасибо!
А что за тема подсветки кода?
Dracula
Подскажите, вы используете Tailwind в качестве css фреймворка?
Нет!
Добрый вечер
Вопрос можно?
Это уроки с нуля? Без основ?
Уроки - котрые включают базовые понятия...
получил в переменную navv кнопки через квериселекторалл по классу.
написал функцию filter , в которой просто консольлог
потом пишу navv.addEventListener( 'click' , filter );
и мне консоль выдает оть такое
navv.addEventListener is not a function
почему?
Потому что через navv = querySelectorAll('.class') вы получаете коллекцию всех кнопок с указанным классом. Что бы обратиться к какой-то конкретной кнопке и повесить на неё слушатель событий, необходимо обратиться к ней как к элементу коллекции, т.е. navv[i].addEventListener()
Подскажите пожалуйста, а конспект занятий есть?
Записывайте сами, так лучше усваивается.
Кто может подсказать чем является "button" в button => {
button.addEventListener... }
можно подставлять любое значение, это переменная или название функции?
button - тег. если открыть NodeList, то там откроется участок кода и там можно увидеть этот button.
и уже к нему идет обращение. но это я так понял
@@eugenenibiru2020 спасибо что ответили, я уже разобрался) в данном случае первый button является аргументом стрелочной функции и туда при помощи метода forEach мы передаем каждую отдельную кнопку. Я просто не мог понять название можно любое или нет(можно любое).
В стрелочной функции
button=> {code}
button это параметр, а точнее element, по которому мы проходим циклом/forEach. Этот button можно назвать и element или e или el, согласно негласной этике))
какая тема установлена на VSCODE?
Dracula
@@stackdev Darcula или Dracula?
@@sergeko9443 Dracula
так это получается, что только именно для button метод AddEventListener не работает?
Привет. не понял - что ты имеешь ввиду?
я так поняла, что метод addEventListener() не доступен,
если мы пытаемся повесить событие на кнопки с одним классом
( ' .btn ' )
тогда нужно использовать метод forEach() ,
чтобы повесить событие addEventListener() на каждую кнопку
@@____Olga__ Если мы выделили 2 кнопки и присвоили их одной переменной - buttons - то чтобы повесить обработчик на каждую кнопку - нужно как-то получить доступ к каждой конкретной конопке (в переменной buttons - у нас список кнопок). Мы можем сделать это с помощью цикла (бежим по списку кнопок из переменной buttons и вешаем обработчик на куждую). Ты это имела ввиду?
@@stackdev да, конечно, когда мы работаем со списком(здесь акцент не на классе, а смысл в том, что в одной переменной лежит много кнопок)
, то необходимо применить методы перебора(кот. доступны), что бы достучаться до каждой кнопки , спасибо, именно так :)
@@stackdev , подскажите какой плагин
стоит в вашем visual studio code, мне нравится визуально приятная цветовая гамма кода?
получается до "Событий" надо изучить функции?
Конечно
@@stackdev просто я иду по вашим рекомендациям "как учить js" )
Пришел сюда после видео DOM
6:15 почему мы ничего не получаем?
На 28 строчке, мы, с помощью метода removeEventListener, удалили событие click с функцией handleClick у buttonTwo
Би ти эс