11. Модель событий в JavaScript 1.2. Кох С. Введение в JavaScript. 1997 (Германия)

Новые события

Наступило время, рассмотреть 1 из новых особенностей Netscape Navigator 4.x - модель событий JavaScript 1.2. Приведенные здесь примеры будут работать только в Netscape Navigator 4.x (хотя большинство из них работают также и в предварительных версиях этого браузера).

В JavaScript 1.2 поддерживается обработка следующих событий:

Изучая таблицу, можете увидеть, что была реализована обработка некоторых новых событий. На этом уроке мы и рассмотрим некоторые из них.

Сперва давайте рассмотрим событие Resize. С помощью этого события Вы можете определить, был бы размер окна изменен читателем. Следующий скрипт демонстрирует, как это делается:

<script>window.onresize=message;function message(){alert("Размер окна изменен")}</script>Пожалуйста, измените размер этого окна.

В строке 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>
document.myForm.myButton.onclick=message;
function message(){
alert('Click event occured!')}</script>

Можно подумать, что 2-я альтернатива немного сложнее. Однако почему тогда именно ее мы используем в 1-м скрипте? Причина состоит в том, что объект window нельзя определить через какой-либо определенный тэг - поэтому нам и приходится использовать 2-й вариант.

Два важных замечания: Во-первых, Вам не следует писать 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></a>
</layer>

Как видите, в тэг <a> мы поместили программу обработки событий onClick, как это мы уже делали в предшествующих версиях JavaScript. Новое здесь заключается в том, что для создания окошка с сообщением мы используем event.x и event.y. А это как раз и есть объект Event, который здесь нам нужен, чтобы узнать координаты мыши.

К тому же я поместил все команды в тэг layer. Благодаря этому мы получаем в сообщении координаты относительно данного слоя, т.е. в нашем случае относительно самого изображения. В противном же случае мы получили бы координаты относительно окна браузера (инструкция return false используется здесь для того, чтобы браузер обрабатывал далее данную ссылку)

Объект Event получил следующие свойства (их мы рассмотрим в следующих примерах):

Перехват события

Одна из важных особенностей языка - перехват события. Если кто-то, к примеру, щелкает на кнопке, то вызывается программа обработки события onClick, соответствующая этой кнопке. С помощью обработки событий Вы можете добиться того, чтобы объект, соответсвующий вашему окну, документу или слою, перехватывал и обрабатывал событие еще до того, как для этой цели объектом указанной кнопки будет вызван обработчик событий. Точно так же объект вашего окна, документа или слоя может обрабатывать сигнал о событии еще до того, как он достигает своего обычного адресата.

Чтобы увидеть, для чего это может пригодиться, давайте рассмотрим следующий пример:

<script>
window.captureEvents(Event.CLICK);
window.onclick=handle;
function handle(e){
alert("Объект window перехватывает это событие");
return true;//проследить ссылку
}</script>
<a href=1.php>Кликните</a>

Как видно, мы не указываем программы обработки событий в тэге 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(). Это выглядит следующим образом:

<script>window.captureEvents(Event.CLICK);window.onclick=handle;function handle(e){document.links[1].handleEvent(e)}</script>

<a href=#>Кликните</a><p><a href=# onClick=alert('Обработчик событий для 2-й ссылки')>2-я ссылка</a>

Все сигналы о событиях Click, посылаются на обработку по 2-й ссылке - даже если Вы вовсе и не щелкнули ни по 1 из ссылок!

Следующий скрипт демонстрирует, как Ваш скрипт может реагировать на сигналы о нажатии клавиш. Нажмите на какую-либо клавишу и посмотрите, как работает этот скрипт.

<script>window.captureEvents(Event.KEYPRESS);window.onkeypress=pressed;function pressed(e){alert("Key pressed! ASCII-value: "+e.which)}</script>

предыдущая | главная | следущая