Подробнее о событиях JS

Слайд 2

Типы событий мыши

Простые события
mousedown
Кнопка мыши нажата над элементом.
mouseup
Кнопка мыши отпущена над элементом.
mouseover
Мышь

Типы событий мыши Простые события mousedown Кнопка мыши нажата над элементом. mouseup
появилась над элементом.
mouseout
Мышь ушла с элемента.
mousemove
Каждое движение мыши над элементом генерирует это событие.
Комплексные события
click
Вызывается при клике мышью, то есть при mousedown, а затем mouseup на одном элементе
contextmenu
Вызывается при клике правой кнопкой мыши на элементе.
dblclick
Вызывается при двойном клике по элементу.

Слайд 3

Получение информации о кнопке: which

При обработке событий, связанных с кликами мыши, бывает

Получение информации о кнопке: which При обработке событий, связанных с кликами мыши,
важно знать, какая кнопка нажата.
Для получения кнопки мыши в объекте event есть свойство which.
На практике оно используется редко, т.к. обычно обработчик вешается либо onclick – только на левую кнопку мыши, либо oncontextmenu – только на правую.
Возможны следующие значения:
event.which == 1 – левая кнопка
event.which == 2 – средняя кнопка
event.which == 3 – правая кнопка

Слайд 4

Правый клик: oncontextmenu

Правый клик: oncontextmenu

Слайд 5

Модификаторы shift, alt, ctrl и meta

Модификаторы shift, alt, ctrl и meta

Слайд 6

Координаты

Координаты

Слайд 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/

Слайд 8

Мышь: Drag'n'Drop

Drag’n’Drop – это возможность захватить мышью элемент и перенести его. В

Мышь: Drag'n'Drop Drag’n’Drop – это возможность захватить мышью элемент и перенести его.
свое время это было замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций.
Основной алгоритм Drag’n’Drop выглядит так:
Отслеживаем нажатие кнопки мыши на переносимом элементе при помощи события mousedown.
При нажатии – подготовить элемент к перемещению.
Далее отслеживаем движение мыши через mousemove и передвигаем переносимый элемент на новые координаты путём смены left/top и position:absolute.
При отпускании кнопки мыши, то есть наступлении события mouseup – остановить перенос элемента и произвести все действия, связанные с окончанием Drag’n’Drop.

Слайд 9

Мышь: Drag'n'Drop

Мышь: Drag'n'Drop