Front-end || DOM-события в трех актах | Юрий Федоренко
Вставка
- Опубліковано 3 сер 2024
- Рассказ обо всем, что нужно знать о DOM-событиях.
Не бывает собеседований на должность Front-end-специалиста, где не спрашивают о Document Object Model событиях.
В этом видео все разложено по полочкам:
00:00 - Вступление
0:29 - Почему события в Javascript так важны
1:17 - Акт 1. Назначение обработчиков
7:18 - Акт 2. Объект события
12:41 - Акт 3. Делегирование событий
Справочник по Front-end - itwiki.dev/front-end
А подписка на мой канал в Telegram (goo.gl/1DmE1o) еще и приносит удачу и много разборов того, что спрашивают на собеседованиях в IT-компаниях.
Полезные ссылки:
Все события, MDN - goo.gl/ET2mUK
Почитать о событиях на русском (на learn.javascript.ru):
goo.gl/NX8oTq - основы работы с DOM-событиями.
goo.gl/QF7bdU - события в деталях
Компьютерная Школа Hillel
Сайт: ithillel.ua
Facebook: / hillel.it.school
Instagram: / hillel_itschool
#Frontend #frontend #DOM #ITHillel #javascript #documentobjectmodel
Мужик, у тебя бесподобные видео, содержательные, динамичные, объясняешь очень доступно, даже я понял)), спасибо большое!
П.С. музыка приятная, особенно во вставках)
Пожалуйста, продолжайте в том же духе! Столько видео полезных всего за несколько недель! Крутяк!
Такой хороший контент, но эти заставки с тройной громкостью - просто ужас. Ребенок спит в соседней комнате. Смотришь-смотришь, все хорошо. И КААААК ЕБ**ЕТ
Вторым параметром необязательно функцию передавать, можно передать объект, с методом handleEvent. Тогда this в обработчике будет указывать на тот объект, который был передан. Очень удобно в классах делать вот так: el.addEventListener('click', this); (в таком случае без e.currentTarget нельзя)
Редко пишу комментарии, но тут написал ) Молодец автор разжевал так разжевал! сколько статей перечитал, а тут за 20 минут понял основу ! )
Настолько подробно и понятно!Спасибо огромное!!!Благодаря Вашим видео улучшил свои знания, которые были не достаточно хороши, как оказалось!!!
У вас, конечно, очень изумительная заставка, такая сиреневая с анимацией со звуком. Но с*к* н*х** каждые 30 секунд её вставлять!? А так видео ниче, норм
поддерживаю, видео хорошее, но заставки через слово бесят
Спасибо. Крутой формат. Продолжайте.
Отлично объясняешь , просто находка для тех кто решил выучить js, продолжай в том же духе, ведь ещё столько нормально не раскрытых тем
Make const not var.
Зачёт))))) Спасибо за видео. Информативно
Видео - огонь. Лучшее объяснение из того, что я видел и слышал.
Полезное видео, спасибо!
Афигенно доходчиво, легко, изящно!!!! Спасибо!!!
много полезного узнал, благодарю Юрий. Продолжайте в том же духе, лайк + коммент гарантирую! =)
Заставка и музыка просто Зеб@л@!!!
Очень круто! Спасибо Вам))
Спасибо, идеальная подача!!!!
Отличный видос!
Лайк не глядя=)
Спасибо, Юра
Про passive в addEventListerner'e так и не рассказали 6:40
Хочется поставить максимально много лайков, спасибо!
спасибо за объяснения!
за прогрузки отдельный лайк) спасибо
Красавчик! спасибо!:)
спасибо. очень доступно. Но перебивки очень раздражают и отвлекают.
А можно покритикую? - Вырезать бы все заставки, которые вставлены на каждый чих (когда видишь её третий раз почти подряд, она начинает надоедать, раз на пятый - бесить 😁), и фоновую музыку убрать (да, совсем), очень хочется внимательно слушать, а она отвлекает - и будет супер видео 😇
Тоже хотел написать это. Само видео понравилось, но вот способ подачи ужасно раздражает, после пятой вставки хотелось закрыть видео уже.
Да вставик прям слишком часто.
Соглашусь с тем, что вставок слишком много. В остальном видео и его содержание очень понравились.
какие-то редкие вставки
мне кажется, надо было через слово делать вставку с зубодробительной музыкой для рыгательных вечеринок
Про React прям в точку, как раз сейчас занимаюсь написанием 100500 onClick-ов в день. Ибо реакт требует тотальной декомпозиции, следовательно и кода больше
Круто! Непонятно почему не много просмотров.
топчик
*Способов перехватить события далеко не три*
Перечисленные Вами три способа, это те три способа, которые проектировались для решения этой задачи. Только это не значит что перехватить событие можно *только* такими способами.
Существует масса вариаций сделать тоже самое в слегка не очевидной манере:
от подмены своей функцией оригинального евентемиттера,
до банального навешивания геттера поверх функции генерирующей событие
или функции обслуживающей событие,
или данных которые участвуют в обслуживании процесса события
Не говоря уже о такой экзотике как перехват благодаря создания условий,
в рамках которых нужное нам событие всегда будет приводит к исключению,
которое естественно будет обработано в нашем catch блоке.
А если начать пытаться в своей голове представить что можно наворотить манипулируя областями видимости...
JavaScript - это язык анархистов. Он дает свободы почти столько сколько дает язык ассемблера. Очевидное следствие этого тезиса в том, что в его рамках можно реализовывать совершенно сумасшедшие вещи, кажущиеся на первый взгляд совсем не очевидными.
Спасибо за видео, мне нравится Ваша подача, умело и подробно рассказываете, но как по мне чересчур много заставок.
все прекрасно, только не надо так много отбивок в ролике
зачем отбива каждую минуту? раздражает
А можно пример когда с сервера приходит 1 600 000 тысяч комментариев, вместо пагинации ?)))
комментариев всего 800000 :-)
кнопочек много
К редактору видео: пожалуйста, на будущее выберите другую мелодию на вставки, без таких адских звуков, ладно?..
я сам выбирал звук, сделаем потише)
тут вопрос не сколько в громкости, сколько в самой музыке - слишком резкий переход.
Для каких нибудь продаж, возможно такой подход лучше, но это же образовательный материал. Пытаешься осознать сказанное, а тут тебе на звуковым молотком по голове :) ИМХО.
Но в любом случае огромное спасибо за проделанную работу
И голос в музыке на фоне голоса говорящего отвлекает. Даже если это женский шепот.
@@yurafedorenko1218 музыка норм)
Братан, выкидывай в свою группу в телеграмме не только задачи плз, но и подобную информацию я редко смотрю видео, а почитать люблю, пока еду на работу
ну бро, ну у меня же каждая задачка это разбор какой-то темы, вроде и разбор прочитал, а вроде и поучился, литературная форма такая)
скорость воспроизведения не добавляй, сильно отвлекает
Стоит ли применять делегирование используя ref в реакте?
Юра, а разве в примере на 14:41 нам не нужно использовать this чтобы добраться до конкретного элемента списка?
this, будет указывать на элемент на который навешено событие, то есть на ul, а нам это не подходит
Спасибо за видео, продолжай в том же духе!
9:20 это равенство не относится к стрелочным функциям
Крутое видео. Меня смутило ‘LI’ большими буквами в ифе. Разве так будет работать? Вроде ж не должно.
только так и будет)
ради интереса выведи на консоль e.tagName, и увидишь что браузер вернет ответ именно большими буквами
Juri Andrejczuk ых до консоли не добралась :) смотрела с телефона :)
какой редактор кода использовался в видео?
скорее всего webstorm, phpstorm etc
thanks
да, вебшторм
var $li = ... ; Скажите, что означает доллар впереди названия переменной.
Сергей Калашников в данном случае ничего, просто такое имя переменной. Я придерживаюсь конвенции именования согласно которой имена переменных в которых находятся DOM-элементы или их коллекции начинаются со знака доллара.
Просто так в коде легче ориентироваться
Спасибо большое. Я так и думал :)
Просто понты и тоска по jQuery...
😁
Классно объясняешь но ваши вставки 2-3 сек. сильно раздражают и сбивают фокус. Не делайте так. Или уменьшите раз в 10 это.
10:34 функция стрелочка это ЕС5
ES6
Стандарт ES6 принятый в 2015 году.
А разве нельзя было в стрелочной функции использовать this вместо currentTarget? Ведь она не имеет своего this и использует "хозяйский"
Юлия Павленко а какой у нее «хозяйский»? Там же будет глобальный объект тогда
ответил бы хотя бы правильно
просто мне хочется, чтоб человек разобрался, а ответить правильно и браузерная консоль может
this в стрелочной функции указывает на window(глобальная область видимости), поэтому и его не получится использовать в стрелочной функции
Перестарались с заставками и фоном. Смотреть невозможно к сожалению
отл подача у тебя. Почему так мало обучающих видeо?
У нас є плейлист з Юрієм: ua-cam.com/play/PLuEo4W0EBxtWOf1CZQNmqzwRWG9xeTOZ6.html
6:50
здесь тоже хорошо все описано learn.javascript.ru/bubbling-and-capturing
this в стрелочных будет window
Несостыковка тут 14:47 внутри блока if должно быть e.currentTarget
как раз нет
в самом условии, ошибся
да, и тут неправ)
Не-не все правильно в if. currentTarget = this, как было сказано в видео, а target, указывает на элемент, по которому непосредственно совершенно клик. :)
Содержательно, но в вставках сильно громко, раздражает.
Только вот, пожалуйста, не нужно обработчиков на ссылки :) На сабмит формы - ок, но ссылка - это ссылка.
атрибут onlclik это плохо, а атрибут ng-click это хорошо - сказали они...
Дескать разные области видимости сказали они...
Я боюсь даже представить чему вы еще людей учите. Вы бы хоть не знаю в DevTools посмотрели бы что-ли, если не знаете кода фреймворка которому учите.
Правильный ответ на заданный вопрос, в рамках кодовой базы ангуляр на 15.07.2020 --
*это два идентичных сорта говна*
Потому что единственная разница которая сейчас есть, заключается в том, кто инициирует процесс навешивания обработчика на элемент.
В случае атрибута onclick - инициирует браузер в фазе рендера т.е. еще до конца построения дом дерева,
В случае атрибута ng-click инициирует код агуляр, со всеми прекрасными вытекающими из полного прохода по дому в поисках нужного атрибута.
А итог идентичный - на элементе весит обработчик. То есть оба вешают один хандлер на элемент.
Единственная что следует упомянуть - ангуляр вешает вместо оригинального обработчика из атрибута, свой собственный, который в последействии и вызывает оригинальный обработчик. Что в случае нашего вопроса совершенно без разницы, поскольку к каждому элементу он благополучно будет присобачен.
Итогом этого мракобесия является пламенный превед разработчикам ангуляра с бессрочным абонементом в биореактор.
И если людей придумавших onlcick можно понять, они это делали черти когда, когда никакого опыта в этом ни у кого не было, то господ из ангуляра очистить может только ритуальное пламя.
Только не УЛ, а Ю-ЭЛ и не ЛИ, а ЭЛ-АЙ
Руся, не мочи) Он такой материал разжевал, а ты к таким мелочам.
Безусловно интересный докладчик и важный материал. Но как же достали эти музыкальные вставки! Отписываюсь!
Тебя слышно хуже чем орущую музыку.
музыка неприятная! на фоне музыки ктото чтото говорит (поет) и это раздражает ужасно, я постоянно отвлекаюсь кто разговаривает!? в наушниках очень хорошо слышно. диз
Спасибо за замечание, работаем над звуком
Шизофреник.