Новые события
Наступило время, рассмотреть одну из новых особенностей Netscape Navigator 4.x — модель событий JavaScript 1.2. Приведенные здесь примеры будут работать только в Netscape Navigator 4.x (хотя большинство из них работают также и в предварительных версиях этого браузера). В JavaScript 1.2 поддерживается обработка следующих событий (если Вы хотите узнать побольше об этих событиях, обратитесь к документации JS 1.2 от фирмы Netscape):
Изучая таблицу, можете увидеть, что была реализована обработка некоторых новых событий. На этом уроке мы и рассмотрим некоторые из них. Сперва давайте рассмотрим событие 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 получил следующие свойства (их мы рассмотрим в следующих примерах):
|
