Основы JavaScript #26 Всплытие и перехват события
HTML-код
- Опубликовано: 8 авг 2019
- В этом видео мы познакомимся с всплытием и перехватом событий.
Ссылки
learn.javascript.ru/event-bub...
jsbin.com/valasomeli/edit?html...
frontender.info/an-introducti...
karmazzin.gitbooks.io/eloquen...
Наш сайт - easycode.school
Telegram - t.me/easycode_news
VK - easy_code_kharkov
Facebook - / itschooleasycode
Instagram - / easycode_it_school
Промокод на полный видеокурс javascript на Udemy: www.udemy.com/modern-javascri...
Прекрасное видео! 😀👍
Благодарю за замечательную работу!
Отличное видео, очень доступно. Большое спасибо!
Без преувеличения лучший плейлист по JS.
я новичок, но очень даже ясно было , спасибо )
Благодарю, появилось понимание этих событий
Подписался, буду смотреть и другие уроки )
Я учил, что 3 стадия события: погружение, захват, всплытие. Хороший пример погружения и всплытия в конце
Спаисбо очень наглядно!!! Теперь понял
спасибо, тему понял)
толково, дякую
👍
Спасибо за урок, всё понятно.
ps: оставляй пожалуйста код из урока на гите
Добрый день. Денис, спасибо за видео! У меня в свою очередь есть вопрос. Я повторил ваш код, всё работает.
Но, я решил чуток сократить код для себя и сделал ОДНУ единую функцию для всех ивент.листенеров вместо отдельных функций.
function click (e) {
console.log(event.target);
}
вот такая простая функция. Которая при нажатии должна выводить в консоль event.target, на который я нажал. Вроде всё логично :)
при этом я обнаружил, что всплытия в данном случае не происходит.
Например: если нажать на 2-й див, то вместо всплытия и вывода в консоль двух разных дивов (сначала 2го, потом 1го) происходит вывод в консоль 2 ОДИНАКОВЫХ РАЗА 2го дива, на который я нажал. А где первый?...
Соответственно, когда я нажал на 5-й вложенный див, у меня вместо всплытия и законсоливания 5-ти разных дивов произошёл вывод в консоль 5 ОДИНАКОВЫХ РАЗ последнего 5-го дива.
Как думаете, почему такое может происходить? Какой-то прикол event.target?
попробуй e.currentTarget это свойство которые отражает текущий объект на котором происходит событие (тоесть во время погружения или всплытия), в отличии от e.target ( которые показывает тот объект на котором собственном и произошёл клик)
Можешь расписать, побуквенно, что происходит в 23 строчке 8:55? Почему так и почему это работает непонятно просто
Смысл понятен. Только мне, как новичку, не понятно где это может пригодиться. Было бы хорошо, если бы приводили примеры из реальной жизни.
Перехват события не так часто используется, а вот всплытие часто и о его эффекте так сказать на реальном примере познакомимся когда будем делать проект.
@@EasyCodeSchool Ок. спасибо.
А где ссылка на демку бабблинга? Даже в гугле нет.
Ссылки обновил под видео
@@EasyCodeSchool Спасибо.
чот я вообще не одупляю, откуда взялся метод timeout у объекта event?
хм, проверил тот-же код на замену этого "псевдометода timeout" на e.fuck . . . хм , работает, кажется я понял назначение этого свойства
Я тоже что-то не могу понять, что это вообще такое?
let ms = (e.timeout = e.timeout + pause || 0);
как это интерпретировать? почему оно так работает?...
Кстати, если в колбек в самом низу, где у setTimeout стоит это значение ms, поставить вместо ms --> e.timeout, всё равно код будет работать. Почему?
Как оно так происходит?? можете, пожалуйста, объяснить, если вы разобрались?
@@vladk3111 разобрался! :) завтра отвечу! У меня уже ночь!
@@vladk3111 привет! смотри, во первых e.timeout это не особый метод или свойство объекта события ( объекта event ), это ПРОСТО свойство добавляемое в этот объект самим программистом! Зачем? Сейчас по любому поймёшь! Можно поэксперементировать. . . Если ты создашь какой нибудь объект в глобальной области видимости, ну например rndObject = { }; ( это важно, именно в глобальной области видимости, чтобы этот объект мог изменяться с каждым вызовом колбэка ) ! Так вот, и в колбэк функции ( function callback ( ){ } ) ты пропишешь вместо event.timeout скажем уже наш объект rndObject.fuck ( вообще без разницы как ты уже по любому понял название этого свойства ) ТО код будет работать ! НО есть один очень важный нюанс ! Код то будет работать НО некорректно, почему? Потому-что объект у нас ОДИН на всю программу, а как ты мог заметить , у нам в конструкции ( event.timeout + ms ) присутствует операция сложения, что в случае нашего созданного в глобальной области объекта будет являться фатальным, т.к. свойство ..fuck будет при каждом клике по объектам увеличиваться и увеличиваться, и со временем тайм ауты в кол-бэке будут по 10-20 секунд, что естественно нам не нужно! Поэтому идеальным выбором в данной ситуации будет объект, который после выполнения кол-бэк функции будет удаляться. .. и это тот самый объект event! Когда мы кликаем в первый раз, у нас запускаются все 100500 наших колбэков, и у них есть один объект event на всех, когда мы кликаем второй раз, у нас снова создаётся объект event и он уже другой, и соответственно свойство timeout у него уже будет своё собственное ! Теперь по конструкции let ms = (e.timeout = e.timeout + pause || 0); ( честно говоря вот именно она меня озадачила в своё время ), тут тоже кстати не очень хитро весь заплёт в операторе " | | " если вспомнить теорию, то он вычисляет с начало левый , затем правый операнды, и будет искать среди них true, ЕСЛИ же true не получится ( ну например false | | undefined ) то он возвращает последнее значение , т.е. в крайнем примере undefined . В нашем случае всё сделано примерно так :
1 сработка кол-бэка : чему у нас равна переменная e.timeout ? да ничему, т.е. undefined поэтому мы получаем let ms = undefined = undefined + 200 || 0, вычисления при операции присваивания let ms = . . начинаются СПРАВА, а с права у нас выражение undefined + 200 || 0, хм, ну undefined + 200 = NaN что уже false , поэтому переходим дальше , а дальше у нас 0, значит как я уже упомянул выше возвращаем последнее значение ( т.к. они оба оказались false) и того, сократим наше выражение до let ms = e.timeout = 0 ; вычисляя его далее мы получим e.timeout = 0 ; ну и в переменную ms разумеется попадает тоже 0, т.е. получаем ms = 0 ; e.timeout = 0 ;
2 сработка кол-бэка : let ms = e.timeout = 0 + 200 || 0, ну а теперь применив полученные знания операцию присваивания вычисляем с права 0+200 || 0 будет равно 200 || 0 . . . 200 даёт true поэтому получается let ms = e.timeout = 200, то есть ms = 200 и e.timeout = 200.
Короче, я не уверен что объяснил тебе супер корректно, возможно есть подводные камни у моего объяснения, НО именно так я разобрался, и выглядит это более менее логично, если что-то не понял, пиши, разберёмся! А по поводу автора данного канала, он только лайкает комменты в духе "о боже, это лучшое что я видил в соей жизни ооо" и прочую чушь ! Я очень надеялся что он ответит, но так и не дождался ! Канал так-себе, объясняет он тут очень плохо, сначала изучает AJAX запросы и говорит в видео ну конструкция new нам ещё не известна, блять СЕРЬЕЗДНО???? сначало AJAX а потом изучаем классы в js??? это кстати в одном из его видео, так что думаю что он просто создал этот канал для рекламы платных курсов, т.к. бывает такое ощущение что он сам не особо то разбирается в том, что происходит в его скриптах ( но т.е. вроде как общую картину видит, а вот объяснить как это всё работает на пальцах он не сможет ), так что надеюсь я тебе помог хоть чуть чуть, ну а если нет, то пиши вопросы, отвечу!
@@TheKirk1989 ну нихрена себе ты написал))) я 3 раза перечитал. Вроде твоё объяснение понятное, спасибо тебе огромное за него. Я сразу не понял твой второй коммент про замену e.timeout на e.fuck. Ну теперь вроде понятно))
Я сразу скажу, я пока только учусь, поэтому некоторые объяснения твои я недопонял, т.к. ещё не сталкивался) поэтому, если вдруг мои вопросы будут тупыми, сорян :) не ошибаются ток бездельники и дураки))))))
Ну вот, например, возникло несколько интересных вопросов:
1. "Поэтому идеальным выбором в данной ситуации будет объект, который после выполнения кол-бэк функции будет удаляться" - почему? Тут вопрос на вопросе. Ты писал про глобальный объект, что он не подходит. Я для прикола попробовал e.timeout поменять на Object.pidor (Object - это же глобальный объект, значит будет работать криво. Ну и типа pidor - придуманное свойство глобального объекта). Да, так и есть, криво... с задержками, как ты и писал. И тут непонятно, почему блядь объект event подходит. Откуда ты знаешь, что объект ивент отличается от какого-то другого объекта, созданного в глобальной области видимости, тем, что он после колбека удаляется?)))) И что значит удалется? не очень это понимаю... :( Вообще вот этот момент с объектом мутный.
2. Я e.timeout заменил на e.pidor и... действительно, всё работает :) то есть, это какое-то придуманное свойство объекта ивент. ОКЕЙ. Почему для этого сложения нужно использовать именно свойство объекта (и именно ивент, но это уже было в первом вопросе)? Смысл вопроса в том, почему именно объект? почему код не работает, если вместо e.timeout (или e.pidor) поставить обычную переменную, "а" например, которой изначально присвоим 0. Почему именно объект?
3. e.timeout = e.timeout + pause это же по идее то же самое, что и e.timeout += pause в современной спецификации ES6. Но если так сделать, код работает иначе, он не идёт по порядку, он выполняет всплытие моментально без шагов по дивам вверх. Кароч, работает не так, как надо. Почему? Есть мысли?
4. Кстати, если клацнуть 2 раза, то текст выделяет. Выполняется действие браузера по умолчанию. ИЗ курса про события мы знаем, что если мы хотим предотвратить действие браузера по умолчанию, нужно прописать return e.preventDefault(); Но бля, куда бы я ни прописывал в коде коллбэк функции этот кусочек превентдефолт, он не работает, всё равно текст продолжает выделять.... есть мысли, почему????
Спасибо огромное, что потратил своё лично время на меня, очень это ценю.
3 стадии а не 2!