Обработчики событий

Обработчики событий - это операторы или функции, которые выполняются в случае наступления определенного события (нажатия на кнопку, изменения содержимого текстового поля, щелчка мышью на гиперссылке и т.д.). Обработчик во многом аналогичен функции, но вызывается он не JavaScript-программой, а самим браузером. Как и обычные функции, обработчики событий могут содержать оператор возврата return значение.

Пример 1. Нажмите эту кнопку, и на экране появится сообщение: Hello.

Исходный HTML-текст выглядит так: 

<form>
<input type="button" value="Click me!" 
onClick="alert('Hello!')">
</form>

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

Пример 2. Наведите указатель мыши на эту гиперссылку - на экране появится сообщение mouseOver! Теперь щелкните мышью на ссылке - появится сообщение click!

Исходный HTML-текст выглядит так: 

<A HREF="#example2" 
onMouseOver="alert('mouseOver!');return true"
onClick="alert('click!');return false"
>гиперссылка</A>

Здесь два обработчика событий: onMouseOver срабатывает, когда указатель мыши оказался над ссылкой, onClick - при щелчке мыши.

JavaScript 1.0 поддерживает следующие обработчики событий:

В JavaScript 1.1 (Netscape Navigator 3) добавлен ряд новых обработчиков событий, не поддерживаемых в Internet Explorer 3:

Новая группа обработчиков событий появилась в JavaScript 1.2; среди них, например, onMouseDown и onMouseUp. Здесь мы не будем их рассматривать.

В таблице перечислены обработчики событий JavaScript 1.0, а также наиболее часто используемые обработчики JavaScript 1.1.

Обработчик Сработает, если... 
onBlur
<TEXTAREA name="..."
       cols=XX rows=XX 
       onBlur="код">
<INPUT type="..." size=XX
       name="..." value="..."
       onBlur="код">
Обработчик поддерживается для type="text", "password", "file", а во многих браузерах и для других типов <INPUT>. 		Пользователь убрал курсор из текстового поля (элемента формы), для которого задан обработчик. 
onBlur
<BODY ... onBlur="код">
<FRAMESET ... onBlur="код">
Не поддерживается в MSIE3! 		Пользователь сделал "текущим" другое окно (например, щелчком мыши); окно, для которого задан обработчик, перестало являться "текущим". 
onChange
<TEXTAREA name="..."
       cols=XX rows=XX 
       onChange="код">
<SELECT name="..." size=XX 
       onChange="код">
<INPUT type="..." size=XX
       name="..." value="..."
       onChange="код">
Обработчик поддерживается для type="text", "password", "file", а во многих браузерах и для других типов <INPUT>. 		Пользователь изменил значение элемента формы, для которого задан обработчик. 
onClick
<A HREF="..." onClick="код">
<INPUT type="..." 
       name="..." value="..."
       onClick="код">
В теге <INPUT> обработчик поддерживается для type="button", "checkbox", "radio", "reset", "submit". 		Пользователь щелкнул мышью на гиперссылке или на элементе формы. 
onFocus
<TEXTAREA name="..."
       cols=XX rows=XX 
       onFocus="код">
<INPUT type="..." size=XX
       name="..." value="..."
       onFocus="код">
Обработчик поддерживается для type="text", "password", "file", а во многих браузерах и для других типов <INPUT>. 		Пользователь поместил курсор в текстовое поле (щелкнул мышью на элементе формы), для которого задан обработчик. 
onFocus
<BODY ... onFocus="код">
<FRAMESET ... onFocus="код">
Не поддерживается в MSIE3! 		Пользователь сделал "текущим" окно, для которого задан обработчик (например, щелчком мыши). 
onLoad
<BODY ... onLoad="код">
<FRAMESET ... onLoad="код">
 Браузер закончил загрузку Web-страницы. 
onMouseOver
<A HREF="..." onMouseOver="код">

<AREA shape="..." coords="..." 
HREF="..." onMouseOver="код">
Пользователь навел указатель мыши на гиперссылку. 
onMouseOut
<A HREF="..." onMouseOut="код">

<AREA shape="..." coords="..." 
HREF="..." onMouseOut="код">
Не поддерживается в MSIE3! 		Пользователь убрал указатель мыши с гиперссылки. 
onSubmit
<FORM action="..." onSubmit="код">
Пользователь отправил заполненную форму (нажатием клавиши Enter или щелчком мыши на кнопке Submit).

Внимание! В тегах <BODY> опущены параметры bgcolor, background, text, link, vlink, alink. В тегах <FRAMESET> опущены параметры cols, rows, border, frameborder, framespacing.

Возвращаемые значения. Как и обычные функции, обработчики событий могут содержать оператор возврата. В обработчиках обычно используется оператор возврата return выражение, где выражение имеет значение true или false. В зависимости от того, какое значение возвращено обработчиком, браузер выполнит (или не выполнит) какие-либо дополнительные действия. Если обработчик возвратил значение true, браузер выполнит действия, предусмотренные в данной ситуации по умолчанию. Если же возвращено false, то реакция браузера будет иной.

Пример. Допустим, HTML-форма имеет вот такой обработчик: 

<FORM action="..." onSubmit="return checkForm()">
Данные, введенные пользователем в форму, будут отправлены на сервер лишь в том случае, если значение checkForm() есть true.

Обработчик true (по умолчанию) false
onSubmit (для HTML-формы) После выполнения обработчика форма будет отправлена на сервер. После выполнения обработчика форма не будет отправлена на сервер.
onClick (для гиперссылки) После выполнения обработчика произойдет переход по гиперссылке. После выполнения обработчика переход по гиперссылке не происходит.
onMouseOver (для гиперссылки) После выполнения обработчика переход по гиперссылке не происходит. После выполнения обработчика произойдет переход по гиперссылке.
onMouseOut (для гиперссылки) После выполнения обработчика переход по гиперссылке не происходит. После выполнения обработчика произойдет переход по гиперссылке.

Copyright © 1999, Alexei Kourbatov