|
|
ВВЕДЕНИЕ
В JAVASCRIPT ДЛЯ МАГА
Стефан Кох (Stefan Koch)
Образовательная программа компании Global Inform. Украина, Харьков. 1998
Part 11: Модель событий в JavaScript 1.2
Новые события
Наступило время, рассмотреть одну из новых особенностей Netscape Navigator 4.x - модель событий JavaScript 1.2. Приведенные здесь примеры будут работать только в Netscape Navigator 4.x (хотя большинство из них работают также и в предварительных версиях этого браузера).
В JavaScript 1.2 поддерживается обработка следующих событий (если Вы хотите узнать побольше об этих событиях, обратитесь к документации JS 1.2 от фирмы Netscape):
| Abort | Focus | MouseOut | Submit |
| Blur | KeyDown | MouseOver | Unload |
| Click | KeyPress | MouseUp | |
| Change | KeyUp | Move | |
| DblClick | Load | Reset | |
| DragDrop | MouseDown | Resize | |
| Error | MouseMove | Select |
Изучая таблицу, можете увидеть,
что была реализована обработка
некоторых новых событий. На этом
уроке мы и рассмотрим некоторые из
них.
Сперва давайте рассмотрим событие Resize.
С помощью этого события Вы можете
определить, был бы размер окна
изменен читателем. Следующий
скрипт демонстрирует, как это
делается:
<html>
<head>
<script language="JavaScript">
window.onresize= message;
function message() {
alert("Размер окна изменен!");
}
</script>
</head>
<body>
Пожалуйста, измените размер этого окна.
</body>
</html>
В строке
window.onresize= message;
мы задаем процедуру обработки такого события. Точнее, функция message() будет вызываться всякий раз, как только пользователь изменит размер окна. Возможно, Вы не знакомы с таким способом назначения программ, обрабатывающих события. Однако JavaScript 1.2 ничего нового здесь не привносит. Например, если у Вас есть объект button, то Вы можете определить процедуру обработки события следующим образом:
<form name="myForm">
<input type="button" name="myButton" onClick="alert('Click event occured!')">
</form>
Однако Вы можете написать это и по-другому:
<form name="myForm">
<input type="button" name="myButton">
</form>
...
<script language="JavaScript>
document.myForm.myButton.onclick= message;
function message() {
alert('Click event occured!');
}
</script>
Можно подумать, что вторая
альтернатива немного сложнее.
Однако почему тогда именно ее мы
используем в первом скрипте?
Причина состоит в том, что объект
window нельзя определить через
какой-либо определенный тэг -
поэтому нам и приходится
использовать второй вариант.
Два важных замечания: Во-первых, Вам
не следует писать window.onResize - я
имею в виду, что Вы должны писать
все прописными буквами. Во-вторых,
Вы не должны ставить после message
никаких скобок. Если Вы напишете window.onresize=
message(), то браузер интерпретирует message()
как вызов функции. Однако в нашем
случае мы не хотим напрямую
вызывать эту функцию - мы лишь хотим
определить обработчик события.
В язык JavaScript 1.2 добавлен новый
объект Event. Он содержит свойства,
описывающие некое событие. Каждый
раз, когда происходит какое-либо
событие, объект Event передается
соответствующей программе
обработки.
В следующем примере на экран
выводится некое изображение. Вы
можете щелкнуть где-нибудь над ним
клавишей мыши. В результате
появится окошко сообщений, где
будут показаны координаты той
точки, где в этот момент находилась
мышь:
Код скрипта:
<layer>
<a href="#" onClick="alert('x: ' + event.x + ' y: ' + event.y); return false;">
<img src="davinci.jpg" width=209 height=264 border=0></a>
</layer>
Как видите, в тэг <a> мы
поместили программу обработки
событий onClick, как это мы уже
делали в предшествующих версиях
JavaScript. Новое здесь заключается в
том, что для создания окошка с
сообщением мы используем event.x и event.y.
А это как раз и есть объект Event,
который здесь нам нужен, чтобы
узнать координаты мыши.
К тому же я поместил все команды в
тэг <layer>. Благодаря этому мы
получаем в сообщении координаты
относительно данного слоя, т.е. в
нашем случае относительно самого
изображения. В противном же случае
мы получили бы координаты
относительно окна браузера.
(инструкция return false;
используется здесь для того, чтобы
браузер обрабатывал далее данную
ссылку)
Объект Event получил следующие свойства (их мы рассмотрим в следующих примерах):
| Свойство | Описание |
|---|---|
| data | Массив адресов URL оставленных объектов, когда происходит событие DragDrop. |
| layerX | Горизонтальное положение курсора (в пикселах) относительно слоя. В комбинации с событием Resize это свойство представляет ширину окна браузера. |
| layerY | Вертикальное положение курсора (в пикселах) относительно слоя. В комбинации с событием Resize это свойство представляет высоту окна браузера. |
| modifiers | Строка, задающая ключи модификатора - ALT_MASK, CONTROL_MASK, META_MASK или SHIFT_MASK |
| pageX | Горизонтальное положение курсора (в пикселах) относительно окна браузера. |
| pageY | Вертикальное положение курсора (в пикселах) относительно окна браузера. |
| screenX | Горизонтальное положение курсора (в пикселах) относительно экрана. |
| screenY | Вертикальное положение курсора (в пикселах) относительно экрана. |
| target | Строка, представляющая объект, которому исходно было послано событие. |
| type | Строка, указывающая тип события. |
| which | ASCII-значение нажатой клавиши или номер клавиши мыши. |
| x | Синоним layerX |
| y | Синоним layerY |
Одна из важных особенностей языка
- перехват события. Если кто-то, к
примеру, щелкает на кнопке, то
вызывается программа обработки
события onClick, соответствующая
этой кнопке. С помощью обработки
событий Вы можете добиться того,
чтобы объект, соответсвующий
вашему окну, документу или слою,
перехватывал и обрабатывал событие
еще до того, как для этой цели
объектом указанной кнопки будет
вызван обработчик событий. Точно
так же объект вашего окна,
документа или слоя может
обрабатывать сигнал о событии еще
до того, как он достигает своего
обычного адресата.
Чтобы увидеть, для чего это может
пригодиться, давайте рассмотрим
следующий пример:
<html>
<head>
<script language="JavaScript">
window.captureEvents(Event.CLICK);
window.onclick= handle;
function handle(e) {
alert("Объект window перехватывает это событие!");
return true; // т.е. проследить ссылку
}
</script>
</head>
<body>
<a href="test.htm">"Кликните" по этой ссылке.</a>
</body>
</html>
Как видно, мы не указываем программы обработки событий в тэге <a>. Вместо этого мы пишем
window.captureEvents(Event.CLICK);
с тем, чтобы перехватить событие Click
объектом window. Обычно объект window не
работает с событием Click. Однако,
перехватив, мы затем его
переадресуем в объект window.
Заметим, что в Event.CLICK фрагмент CLICK
должен писаться заглавными
буквами. Если же Вы хотите
перехватывать несколько событий,
то Вам следует отделить их друг от
друга символами |. Например:
window.captureEvents(Event.CLICK | Event.MOVE);
Помимо этого в функции handle(), назначенной нами на роль обработчика событий, мы пользуемся инструкцией return true;. В действительности это означает, что браузер должен обработать и саму ссылку, после того, как завершится выполнение функции handle(). Если же Вы напишете вместо этого return false;, то на этом все и закончится.
Если теперь в тэге <a> Вы зададите программу обработки события onClick, то поймете, что данная программа при возникновении данного события вызвана уже не будет. И это не удивительно, поскольку объект window перехватывает сигнал о событии еще до того, как он достигает объекта link. Если же Вы определите функцию handle() как
function handle(e) {
alert("Объект window перехватывает это событие!");
window.routeEvent(e);
return true;
}
то компьютер будет проверять, определены ли другие программы обработки событий для данного объекта. Переменная e - это наш объект Event, передаваемый функции обработки событий в виде аргумента.
Кроме того, Вы можете непосредственно послать сигнал о событии какому-либо объекту. Для этого Вы можете воспользоваться методом handleEvent(). Это выглядит следующим образом:
<html>
<script language="JavaScript">
window.captureEvents(Event.CLICK);
window.onclick= handle;
function handle(e) {
document.links[1].handleEvent(e);
}
</script>
<a href="test.htm">"Кликните" по этой ссылке</a><br>
<a href="test.htm"
onClick="alert('Обработчик событий для второй ссылки!');">Вторая ссылка</a>
</html>
Все сигналы о событиях Click, посылаются на обработку по второй ссылке - даже если Вы вовсе и не щелкнули ни по одной из ссылок!
Следующий скрипт демонстрирует, как Ваш скрипт может реагировать на сигналы о нажатии клавиш. Нажмите на какую-либо клавишу и посмотрите, как работает этот скрипт.
<html>
<script language="JavaScript">
window.captureEvents(Event.KEYPRESS);
window.onkeypress= pressed;
function pressed(e) {
alert("Key pressed! ASCII-value: " + e.which);
}
</script>
</html>
[ Предыдущая часть ] [ Оглавление ] [Следующая часть]
©1996,1997 by Stefan Koch
E-mail: skoch@rumms.uni-mannheim.de
http://rummelplatz.uni-mannheim.de/~skoch/
По материалам Центра
Информационных Технологий (Россия)
Перевод - Радик Усманов