Документ взят из кэша поисковой машины. Адрес
оригинального документа
: http://www.sao.ru/hq/vch/RusDoc/koch/part11/part11.htm
Дата изменения: Wed Apr 1 16:15:22 1998 Дата индексирования: Tue Oct 2 14:33:48 2012 Кодировка: koi8-r Поисковые слова: images |
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 нельзя определить через какой-либо определенный тэг - поэтому нам и приходится использовать второй вариант.
В язык 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, который здесь нам нужен, чтобы узнать координаты мыши.
Объект 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.
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/
Моя книга по JavaScript