|
Введение в JavaScript для Мага © 1996, 1997 Стефан Кох (Stefan Koch) Part 11: Модель событий в JavaScript 1.2 Новые события Наступило время, рассмотреть одну из новых особенностей Netscape Navigator 4.x - модель событий JavaScript 1.2. Приведенные здесь примеры будут работать только в Netscape Navigator 4.x (хотя большинство из них работают также и в предварительных версиях этого браузера). В JavaScript 1.2 поддерживается обработка следующих событий (если Вы хотите узнать побольше об этих событиях, обратитесь к документации JS 1.2 от фирмы Netscape - http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm):
Изучая таблицу, можете увидеть, что была реализована обработка некоторых новых событий. На этом уроке мы и рассмотрим некоторые из них. Сперва давайте рассмотрим событие Resize. С помощью этого события Вы можете определить, был бы размер окна изменен читателем. Следующий скрипт демонстрирует, как это делается: window.onresize= message; function message() { alert("The window has been resized!"); } Пожалуйста, измените размер этого окна. В строке window.onresize= message; мы задаем процедуру обработки такого события. Точнее, функция message() будет вызываться всякий раз, как только пользователь изменит размер окна. Возможно, Вы не знакомы с таким способом назначения программ, обрабатывающих события. Однако JavaScript 1.2 ничего нового здесь не привносит. Например, если у Вас есть объект button, то Вы можете определить процедуру обработки события следующим образом: Однако Вы можете написать это и по другому: ... Как видите, в тэг мы поместили программу обработки событий onClick, как это мы уже делали в предшествующих версиях JavaScript. Новое здесь заключается в том, что для создания окошка с сообщением мы используем event.x и event.y. А это как раз и есть объект Event, который здесь нам нужен, чтобы узнать координаты мыши. К тому же я поместил все команды в тэг Объект Event получил следующие свойства (их мы рассмотрим в следующих примерах):
Перехват события Одна из важных особенностей языка - перехват события. Если кто-то, к примеру, щелкает на кнопке, то вызывается программа обработки события onClick, соответствующая этой кнопке. С помощью обработки событий Вы можете добиться того, чтобы объект, соответсвующий вашему окну, документу или слою, перехватывал и обрабатывал событие еще до того, как для этой цели объектом указанной кнопки будет вызван обработчик событий. Точно так же объект вашего окна, документа или слоя может обрабатывать сигнал о событии еще до того, как он достигает своего обычного адресата. Чтобы увидеть, для чего это может пригодиться, давайте рассмотрим следующий пример: window.captureEvents(Event.CLICK); window.onclick= handle; function handle(e) { alert("Объект window перехватывает это событие!"); return true; // т.е. проследить ссылку } Click on this link (online-версия позволит Вам проверить этот скрипт немедленно) Как видно, мы не указываем программы обработки событий в тэге . Вместо этого мы пишем window.captureEvents(Event.CLICK); с тем, чтобы перехватить событие Click объектом window. Обычно объект window не работает с событием Click. Однако, перехватив, мы затем его переадресуем в объект window. Заметим, что в Event.CLICK фрагмент CLICK должен писаться заглавными буквами. Если же Вы хотите перехватывать несколько событий, то Вам следует отделить их друг от друга символами |. Например: window.captureEvents(Event.CLICK | Event.MOVE); Помимо этого в функции handle(), назначенной нами на роль обработчика событий, мы пользуемся инструкцией return true;. В действительности это означает, что браузер должен обработать и саму ссылку, после того, как завершится выполнение функции handle(). Если же Вы напишете вместо этого return false;, то на этом все и закончится. Если теперь в тэге Вы зададите программу обработки события onClick, то поймете, что данная программа при возникновении данного события вызвана уже не будет. И это не удивительно, поскольку объект window перехватывает сигнал о событии еще до того, как он достигает объекта link. Если же Вы определите функцию handle() как function handle(e) { alert("The window object captured this event!"); window.routeEvent(e); return true; } то компьютер будет проверять, определены ли другие программы обработки событий для данного объекта. Переменная e - это наш объект Event, передаваемый функции обработки событий в виде аргумента. Кроме того, Вы можете непосредственно послать сигнал о событии какому-либо объекту. Для этого Вы можете воспользоваться методом handleEvent(). Это выглядит следующим образом: window.captureEvents(Event.CLICK); window.onclick= handle; function handle(e) { document.links[1].handleEvent(e); } "Кликните" по этой ссылке onClick="alert('Обработчик событий для второй ссылки!');">Вторая ссылка (online-версия позволит Вам проверить этот скрипт немедленно) Все сигналы о событиях Click, посылаются на обработку по второй ссылке - даже если Вы вовсе и не щелкнули ни по одной из ссылок! Следующий скрипт демонстрирует, как Ваш скрипт может реагировать на сигналы о нажатии клавиш. Нажмите на какую-либо клавишу и посмотрите, как работает этот скрипт. window.captureEvents(Event.KEYPRESS); window.onkeypress= pressed; function pressed(e) { alert("Key pressed! ASCII-value: " + e.which); } ©1996,1997 by Stefan Koch e-mail:skoch@rumms.uni-mannheim.de http://rummelplatz.uni-mannheim.de/~skoch/ Моя книга по JavaScript: http://www.dpunkt.de/javascript |