из объекта event информацию об x- и y- координатах клика.

162 Часть II. Продвинутый JavaScript

Перезагрузите нашу модифицированную страницу

в браузере и кликните по элементу заголовка. При каждом

клике в консоли должна появиться новая строка, как пока-

зано ниже. Каждая из строк оканчивается двумя числами:

x - и y -координатами клика.

Клик! 88 43

Клик! 63 53

Клик! 24 53

Клик! 121 46

Клик! 93 55

Клик! 103 48

0

3

5

0

x

КООРД ИНАТЫ В БРАУЗЕРЕ

В веб-браузере, как и в большинстве других сред

2

графического программирования, нулевая пози-

(3, 2)

ция x - и y -координат находится в верхнем левом

углу экрана. По мере роста x -координаты точка

смещается к правому краю страницы, а по мере

5

роста y -координаты — к низу страницы (рис. 10.3).

y

Рис. 10.3. Система координат

в браузере, показан клик

в координатах (3, 2)

Событие mousemove

Событие mousemove возникает всякий раз при перемещении мышки. Mouse move —

Создайте файл с именем mousemove.html и введите туда следующий код:

перемещение

мышки

Перемещение мышки

Привет, мир!

 $("html").mousemove(function (event) {

 $("#heading").offset({

10. Интерактивное программирование 163

left: event.pageX,

top: event.pageY

});

});

В строке  мы вызовом $("html").mousemove(обработчик) доба-

вили обработчик события mousemove. В данном случае аргумент обра-

ботчик — это функция целиком. Она начинается после mousemove

и продолжается до тега . Мы использовали $("html"), чтобы

найти элемент html, поэтому обработчик будет вызван при перемеще-

нии мышки в любом месте страницы: функция, которую мы передали

в скобках после mousemove, будет вызываться всякий раз, когда пользо-

ватель передвинет мышку.

В этом примере вместо того, чтобы создать обработчик отдельно

и передать методу mousemove имя функции (как мы это делали ранее

с функцией clickHandler), мы передали mousemove непосредственно

саму функцию. Это очень распространенный подход к написанию обра-

ботчиков, поэтому освоиться с такой записью весьма полезно.

В строке , в коде функции-обработчика, мы нашли

элемент заголовка и вызвали для него метод offset. Как

я уже говорил, у объекта, который передается в каче-

стве аргумента offset, могут быть свойства left и top.

В данном случае мы присваиваем свойству left значе-

ние event.pageX, а свойству top — event.pageY. Теперь

каждый раз при передвижении мышки заголовок будет

перемещаться в позицию, где произошло событие. Иными

словами, куда бы вы ни передвинули мышь, заголовок

будет следовать за ней.

Что мы узнали

Из этой главы мы узнали, как писать JavaScript-код, который выполня-

ется тогда, когда вам это нужно. Функции setTimeout и setInterval

отлично подходят, чтобы запускать код спустя заданное время. Если же

вам нужно выполнять код в ответ на действия пользователя, к вашим

услугам click, mousemove и другие события.

В следующей главе мы с помощью пройденного сможем написать

игру!

164 Часть II. Продвинутый JavaScript

УПРА ЖНЕНИЯ

Выполните эти упражнения, чтобы опробовать разные варианты

интерактивного программирования.

#1. Следом за кликами

Измените последний пример с mousemove так, чтобы заголовок

следовал не за указателем мышки, а только за кликами: вы кли-

каете в любом месте страницы, и заголовок перемещается туда.

#2. Создайте собственную анимацию

Используйте setInterval для анимации заголовка h1, двигая

его по квадрату, вдоль краев страницы. Пусть он переместится

на 200 пикселей вправо, на 200 пикселей вниз, 200 пикселей

влево, 200 пикселей вверх, а затем начнет с начала. Подсказка:

нужно запоминать текущее направление (вправо, вниз, влево

или вверх), чтобы знать, увеличивать или уменьшать для заго-