JavaScript события мыши и указателя, Drag and Drop компонент

✏️ Разбираемся с событиями мыши — mousemove, mouseover и mouseout, mouseenter и mouseleave, mouseup, click, dblclick и contextMenu. Узнаем о современном стандарте — Pointer Events (события указателя). Напишем с помощью событий pointerdown, pointermove и pointerup классовый компонент DragAndDrop.

🔴 Timeline:
▶ 00:00​ | Введение
▶ 00:28​ | События мыши (Mouse Events)
▶ 00:49​ | Движение мыши — mousemove
▶ 01:06​ | Движение мыши — mouseover и mouseout
▶ 03:34​ | Движение мыши — особенности event relatedTarget
▶ 04:36​ | Движение мыши — особенности mouseover и mouseout при переходе на дочерние элементы
▶ 06:37​ | Движение мыши — mouseenter и mouseleave
▶ 07:52​ | Нажатие мыши — mousedown, mouseup и click
▶ 09:43​ | Нажатие мыши — event target и currentTarget
▶ 10:53​ | Нажатие мыши — dblclick, двойной клик
▶ 11:20​ | Нажатие мыши — contextmenu, нажатие правой клавиши мыши
▶ 11:56​ | События указателя (Pointer Events)
▶ 14:14​ | Мультитач — событие pointerdown
▶ 16:43​ | Компонент Drag and drop — события pointerdown, pointermove и pointerup
▶ 32:14​ | Заключение

📚 Ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #js #javascript

[AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:


Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[svitboomer]

Так и запишем "Загребущая рука" 😄 Спасибо за твои уроки и твой опыт, который ты передаёшь нам 🥰

[like_that_dude]

Большое тебе спасибо за твоё время и знания которыми ты делишься бесплатно. Я надеюсь тебе хватит рвения и время закончить данный курс полностью. Очень классная подача и простым языком, понимаешь всё с первого раза. Ещё раз спасибо тебе просто огромнейшее !!

[Pavelius]

Очень полезное видео. И пример не абстракция какая-то, а хороший пример, реальный, спасибо огромное

[smotritelyoutube]

Супер, просто пушка, еще и с полезным примером в конце, так еще и не просто функциями, а классом (в чем как раз из-за недостатка практики и есть пробелы😅), ЛАЙК!!!

[alexandraweather]

крутанский канал и очень полезные видео!
было бы еще очень и очень круто какие-нибудь мастерклассы делать - по свг, например, верстке сложных компонентов или анимации на js

[bagrationasatryan]

Для использования в реальных проектах, нужно добавить защиту от алертов и иных смен фокуса окна браузера. Иначе, после отпускания указателя, когда вернемся в браузер, "еда" будет таскаться при отпущенном указателе. Этот баг даже в фигме до сих пор не исправлен😅

[alexdexx]

Про новые pointer-события первый раз услышал, круто, спасибо!
И драг-н-дроп крутой, жаль, 90% кода списывал, т.к. только недавно познакомился с классами в целом. Вот, думаю, где практику с классами себе добыть? Буду смотреть дальше)

[pikau]

Отличная реализация, только подход с методами в addEventListener мне не нравится. Так ты никогда от них больше не отпишешься. Самый лучший способ в таких ситуациях - делать методы (обработчики событий) полями, в которых будет лежать стрелочная функция. Так и контекст останется на месте и ссылка не потеряется. А так круто, молодец)

[bagrationasatryan]

И еще, лучше ставить захват мыши, чтобы при перетаскивании, даже при выходе указателя за пределы документа, перемещение продолжалось (при этом, контролируя не выход границы объекта за пределы документа)

[Zentu-ojep]

привет, после окончание курса сразу будет мастер класс ? В мастер классе будет вестка сайта с добавлением js или создание мини приложение

[FootballDayss]

Спасибо за урок! ❤А сколько видео вы планируете включить в этот курс по js, тоесть сколько ещё тем вы планируете разобрать в рамках курса? :>💐

[nepcz]

если не классами, а функциями писать, будет хуже читаться код? или какой плюс в данном примере писать на классах?

[Polite_person_]

Зачем многие просят React? Выучите сначала уверенно JS, TS, разберитесь с ООП, SOLID. Когда знаешь хорошо основы, то выучить библиотеку не так сложно. А то классы увидели, ой а что это? Ой, а обязательно так? Да обязательно! А можно реакт? можно! Но потом😅

[gederionmendeliny]

Если будете повторять пример с DND, не забудьте добавить в стили: *_img { pointer-events: none; }_* . Иначе не будет работать, а в видео про это не сказано.

[locktar-o-dark]

17:13 иэмджи, ты серьёзно? То есть ты даже английский алфавит не смог выучить. Мдэ.

[foraxxx]

Спасибо за уроки! Какие у вас дальнейшие планы после курса по js и вёрстке сайта с помощью js?