Слайд 2Типы событий мыши
Простые события
mousedown
Кнопка мыши нажата над элементом.
mouseup
Кнопка мыши отпущена над элементом.
mouseover
Мышь
![Типы событий мыши Простые события mousedown Кнопка мыши нажата над элементом. mouseup](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1121365/slide-1.jpg)
появилась над элементом.
mouseout
Мышь ушла с элемента.
mousemove
Каждое движение мыши над элементом генерирует это событие.
Комплексные события
click
Вызывается при клике мышью, то есть при mousedown, а затем mouseup на одном элементе
contextmenu
Вызывается при клике правой кнопкой мыши на элементе.
dblclick
Вызывается при двойном клике по элементу.
Слайд 3Получение информации о кнопке: which
При обработке событий, связанных с кликами мыши, бывает
![Получение информации о кнопке: which При обработке событий, связанных с кликами мыши,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1121365/slide-2.jpg)
важно знать, какая кнопка нажата.
Для получения кнопки мыши в объекте event есть свойство which.
На практике оно используется редко, т.к. обычно обработчик вешается либо onclick – только на левую кнопку мыши, либо oncontextmenu – только на правую.
Возможны следующие значения:
event.which == 1 – левая кнопка
event.which == 2 – средняя кнопка
event.which == 3 – правая кнопка
Слайд 5Модификаторы shift, alt, ctrl и meta
![Модификаторы shift, alt, ctrl и meta](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1121365/slide-4.jpg)
Слайд 7События mouseover/mouseout, свойство relatedTarget
http://learn.javascript.ru/article/mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2/
![События mouseover/mouseout, свойство relatedTarget http://learn.javascript.ru/article/mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2/](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1121365/slide-6.jpg)
Слайд 8Мышь: Drag'n'Drop
Drag’n’Drop – это возможность захватить мышью элемент и перенести его. В
![Мышь: Drag'n'Drop Drag’n’Drop – это возможность захватить мышью элемент и перенести его.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1121365/slide-7.jpg)
свое время это было замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций.
Основной алгоритм Drag’n’Drop выглядит так:
Отслеживаем нажатие кнопки мыши на переносимом элементе при помощи события mousedown.
При нажатии – подготовить элемент к перемещению.
Далее отслеживаем движение мыши через mousemove и передвигаем переносимый элемент на новые координаты путём смены left/top и position:absolute.
При отпускании кнопки мыши, то есть наступлении события mouseup – остановить перенос элемента и произвести все действия, связанные с окончанием Drag’n’Drop.