Часть 11: Модель событий в JavaScript 1.2
Новые события
из них работают также и в
предварительных версиях этого браузера).
tm):
|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("The window has been resized!");
}
</script>
</head>
<body>
Пожалуйста, измените размер этого окна.
</body>
</html>
В строке
window.onresize= 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.onResize - я имею
в виду, что Вы должны писать все прописными буквами. Во-вторых, Вы не должны
ставить после сообщения никаких скобок. Если Вы напишете 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 получил следующие свойства (их мы рассмотрим в следующих
примерах):
|Property |Description |
|Data |Массив адресов URL оставленных объектов, когда происходит |
| |событие DragDrop. |
|LayerX |Горизонтальное положение курсора (в пикселах) относительно |
| |слоя. В комбинации с событием Resize это свойство |
| |представляет ширину окна браузера. |
|LayerY |Вертикальное положение курсора (в пикселах) относительно |
| |слоя. В комбинации с событием Resize это свойство |
| |представляет высоту окна браузера. |
|modifiers |Строка, задающая ключи модификатора - ALT_MASK, |
| |CONTROL_MASK, META_MASK or 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">Click on this link</a>
</body>
</html>
Как видно, мы не указываем программы обработки событий в тэге <a>. Вместо этого
мы пишем
window.captureEvents(Event.CLICK);
CLICK должен писаться
заглавными буквами. Если же Вы хотите перехватывать несколько событий, то Вам
следует отделить их друг от друга символами |. Например:
window.captureEvents(Event.CLICK | Event.MOVE);
того, как завершится выполнение
функции handle(). Если же Вы напишете вместо этого return false;, то на этом
все и закончится.
Если теперь в тэге <a> Вы зададите программу обработки события onClick, то
поймете, что данная программа при возникновении данного события вызвана уже не
будет. И это не удивительно, поскольку объект window перехватывает сигнал о
событии еще до того, как он достигает объекта link. Если же Вы определите
функцию handle() как
function handle(e) {
alert("The window object captured this event!");
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>
[Назад] [Содержание] [Вперед]
| Главная |