Учебник по JavaScript :: часть 11 :: Модель событий в JavaScript
Новые события
Наступило время, рассмотреть одну из новых особенностей 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() как вызов функции. Однако в нашем случае мы не хотим
напрямую вызывать эту функцию - мы лишь хотим определить обработчик
события.
Объект Event
В язык 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>
[назад]
[оглавление]