Свет в Internet. JavaScript: События

Главная

Новости

Статьи и обзоры
  Горожанин
  Обнинск в Internet
  Web Design
  Hardware
  Software
  Безопасность
  Серфинг
  Игродром
  Relax
  Технологии
  Web-обзор
  Интернет-ликбез
  Опросник
  УП-Технологии
  ART.net

Ссылки

Архив

О нас

Контакты

Форумы

Основатель:
К.Николаенко

Главный Редактор:
С.Коротков

Web Design:
Neutron

POPULAR.RU

= WEB-design =

la_serg

JavaScript: События

Сегодня, как и обещалось, мы рассмотрим модель событий в языке JavaScript. Добавление простых скриптов добавляет анимации, но не интерактивности. А как сделать страничку по настоящему интерактивной? Именно для этого и предназначен богатый набор событий языка JavaScript.

События позволяют ассоциировать функции JS (в том числе определенные пользователем) с каким-нибудь действием посетителя сайта. Самый тривиальный пример - кнопки меняющиеся при наведении на них мыши.

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

Abort	Error	MouseDown	Reset
Blur	Focus	MouseMove	Resize
Click	KeyDown	MouseOut	Select
Change	KeyPress	MouseOver	Submit
DblClick	KeyUp	MouseUp	Unload
DragDrop	Load	Move

(если Вы хотите узнать побольше об этих событиях, обратитесь к документации JS 1.3 от фирмы Netscape).

Функции JS, соответствующие действиям пользователя, можно задать двумя способами: внутри HTML и внутри JavaScript.

Если мы хотим воспользоваться первым способом (нужно отметить, что этот способ наиболее популярный), то в теге объекта необходимо вставить параметр ожидаемого события. Здесь ожидаемое событие - событие, с которым мы хотим ассоциировать функцию JavaScript, записанное в виде параметра тега, а тег объекта - та конструкция в коде странички, которая отвечает за отображения объекта, с которым может произойти ожидаемое событие (надеюсь все меня поняли :)). Небольшой примерчик для осмысления:

<html>
<img src="1.gif" onmouseover="over()" name="object">
<script language="JavaScript">
function over() { alert("Это картинка!");}
</script> </html>

Итак, в произвольном месте кода странички мы имеем: объект типа картинка, код JS. Обратите внимание на параметр onmouseover="" - этот параметр может быть не только у картинки. Он устанавливает обработчик события MouseOver для данного объекта. Если следовать нашей терминологии, то ожидаемое событие - это MouseOver (появление курсора над объектом), а сам объект - это картинка с именем object. Наш пример тривиален: при появлении курсора над картинкой вызывается функция over(), которая выкидывает окошко с текстовым сообщением. Количество событий для объекта ограниченно только логикой (например, посетитель не может изменить размеров картинки, следовательно событие Resize неприменимо к объектам типа картинки и т.п.) Расширим предыдущий пример:

<html>
<img src="1.gif" onmouseover="over()" onmouseout="out()" name="object">
<script language="JavaScript">
function over() {alert("Это картинка!"); }
function out() {alert("Вернись я все прощу!");}
</script> </html>

Этот пример показывает, что Вы можете ассоциировать несколько функций с различными событиями для одного объекта. Во втором примере добавлена функция out(), ассоциированная с событием MouseOut (курсор покидает объект). Эта функция выводит окно с сообщением.

Второй способ ассоциации событие-функция реализуется с помощью JavaScript. Этот способ аналогичен первому. Поясню на примере:

<html> <head>
<script language="JavaScript">
window.onresize= message;
function message() {alert("ай!");}
</script> </head> <body>
Не мни меня.
</body> </html>

Обратите внимание на строчку window.onresize= message; У нас есть объект window, у этого объекта есть свойство onresize. В этом свойстве хранится имя обработчика события Resize (по умолчанию почти у всех событий обработчиком является return true;). Заметьте, имя функции message идет без круглых скобок, поясню - нам надо поместить имя функции в параметр onresize, а если мы поставим круглые скобки после message то JavaScript вызовет функцию message, а переменной window.onresize присвоит значение возвращенное этой функцией.

Какая ассоциация удобней? Конечно, первая, но не для всех объектов существуют html теги (например, нет тега окна браузера см. пример 3) вот в этом случае нас и выручает вторая модель.

В следующей статье мы продолжим изучать модель событий в языке JavaScript - мы постараемся подробно рассмотреть значение каждого события. До встреч

#6(47)/13.03.2001


	Copyright © Свет в Internet Designed by Свет в Internet