> });
>
Источником события нажатия клавиши узел становится в зависимости от того, где находился фокус ввода во время нажатия. Обычные узлы не могут получить фокус ввода (если только вы не задали им атрибут >tabindex), а такие, как ссылки, кнопки и поля форм – могут. Мы вернёмся к полям ввода в главе 18. Когда ни у чего нет фокуса, в качестве целевого узла событий работает >document.body.
Нажатие кнопки мыши тоже запускает несколько событий. События >"mousedown" и >"mouseup" похожи на >"keydown" и >"keyup", и запускаются, когда кнопка нажата и когда отпущена. События происходят у тех узлов DOM, над которыми находился курсор мыши.
После события >"mouseup" на узле, на который пришлись и нажатие, и отпускание кнопки, запускается событие >"click". Например, если я нажал кнопку над одним параграфом, потом передвинул мышь на другой параграф и отпустил кнопку, событие >"click" случится у элемента, который содержал в себе оба эти параграфа.
Если два щелка происходят достаточно быстро друг за другом, запускается событие >"dblclick" (double-click), сразу после второго запуска >"click".
Для получения точных координат места, где произошло событие мыши, обратитесь к свойствам >pageX и >pageY – они содержат координаты в пикселях относительно верхнего левого угла.
В примере создана примитивная программа для рисования. Каждый раз по клику на документе он добавляет точку под вашим курсором. В главе 19 будет представлена менее примитивная программа для рисования.
>
>
Свойства >clientX и >clientY похожи на >pageX и >pageY, но дают координаты относительно части документа, которая видна сейчас (если документ был прокручен). Это удобно при сравнении координат мыши с координатами, которые возвращает >getBoundingClientRect – его возврат тоже связан с относительными координатами видимой части документа.
Каждый раз при сдвиге курсора мыши запускается событие >"mousemove". Его можно использовать для отслеживания позиции мыши. Обычно это нужно при создании некоей функциональности, связанной с перетаскиванием объектов мышью.
К примеру, следующая программа отображает полоску и устанавливает обработку событий так, что движение влево и вправо уменьшает или увеличивает её ширину.