Книги-online

Обработчики Событий Оглавление | Назад | Вперёд | Индекс

Глава 3
Обработчики Событий

В этой главе рассматриваются обработчики событий, используемые с объектами клиентского JavaScript для выполнения определённых действий.

Общую информацию об обработчиках событий см. в книге Клиентский JavaScript. Руководство.

В следующей таблице дано резюме по обработчикам событий. Имя обработчика события состоит из имени события с предшествующим "on." Например, обработчик для события focus называется onFocus.

Таблица 3.1 Обработчики Событий

Событие	Обработчик	Описание
Abort	onAbort	Выполняет код JavaScript, когда пользователь прерывает загрузку изображения.
Blur	onBlur	Выполняет код JavaScript, когда элемент формы теряет фокус ввода или когда окно или фрэйм теряют фокус.
Change	onChange	Выполняет код JavaScript, когда поля Select, Text или Textarea теряют фокус, а их значения были изменены.
Click	onClick	Выполняет код JavaScript, когда произведён щелчок по объекту формы.
DblClick	onDblClick	Выполняет код JavaScript, когда пользователь дважды щёлкнул по элементу формы или по гиперссылке.
DragDrop	onDragDrop	Выполняет код JavaScript, когда пользователь отпустил (мышью) объект в окне браузера, как при перетаскивании файлов.
Error	onError	Выполняет код JavaScript, когда загрузка документа или изображения вызвала ошибку.
Focus	onFocus	Выполняет код JavaScript, когда окно, фрэйм или набор фрэймов получает фокус или когда элемент формы получает фокус ввода.
KeyDown	onKeyDown	Выполняет код JavaScript, когда пользователь нажимает клавишу клавиатуры.
KeyPress	onKeyPress	Выполняет код JavaScript, когда пользователь нажимает клавишу клавиатуры и удерживает её в нажатом состоянии.
KeyUp	onKeyUp	Выполняет код JavaScript, когда пользователь отпускает клавишу клавиатуры.
Load	onLoad	Выполняет код JavaScript, когда браузер закончил загрузку документа или всех фрэймов тэга FRAMESET.
MouseDown	onMouseDown	Выполняет код JavaScript, когда пользователь нажал клавишу мыши.
MouseMove	onMouseMove	Выполняет код JavaScript, когда пользователь перемещает курсор мышью.
MouseOut	onMouseOut	Выполняет код JavaScript, когда указатель мыши покидает область клиентской карты изображений или ссылки.
MouseOver	onMouseOver	Выполняет код JavaScript, когда указатель мыши проходит над объектом или областью.
MouseUp	onMouseUp	Выполняет код JavaScript, когда пользователь отпускает нажатую клавишу мыши.
Move	onMove	Выполняет код JavaScript, когда пользователь или скрипт перемещают окно или фрэйм.
Reset	onReset	Выполняет код JavaScript, когда пользователь восстанавливает значения полей формы (щёлкает кнопку Reset).
Resize	onResize	Выполняет код JavaScript, когда пользователь или скрипт изменяют размеры окна или фрэйма.
Select	onSelect	Выполняет код JavaScript, когда пользователь выделяет некоторый текст в поле text или textarea.
Submit	onSubmit	Выполняет код JavaScript, когда пользователь отправляет форму на сервер.
Unload	onUnload	Выполняет код JavaScript, когда пользователь выходит из документа.

onAbort

Выполняет код JavaScript, когда возникает событие abort; то есть, когда пользователь прерывает загрузку изображения (например, щёлкая ссылку или кнопку Stop).

Обработчик события для	Image
Реализован в	JavaScript 1.1

Синтаксис

onAbort="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.

Пример

В этом примере обработчик onAbort объекта Image отображает сообщение, когда пользователь прерывает загрузку изображения:

<IMG NAME="aircraft" src="books/javascript/javascript_13/f15e.gif"
   onAbort="alert('You didn\'t get to see the image!')">

См. также

event, onError, onLoad

onBlur

Выполняет код JavaScript, когда возникает событие blur; то есть, если элемент формы теряет фокус или если окно или фрэйм теряют фокус.

Обработчик события для

Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window

Реализован в

JavaScript 1.0

JavaScript 1.1: обработчик события для объектов Button, Checkbox, FileUpload, Frame, Password, Radio, Reset, Submit и window

Синтаксис

onBlur="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Описание

Событие blur может быть результатом вызова метода window.blur, или щелчка пользователя мышью на другом объекте или окне или перехода с помощью клавиш табуляции на клавиатуре.

Для окон, фрэймов и наборов фрэймов onBlur специфицирует код JavaScript, выполняемый при потере окном фокуса.

Обработчик onBlur фрэйма переопределяет обработчик onBlur тэга BODY документа, загруженного во фрэйм.

ПРИМЕЧАНИЕ: В JavaScript 1.1 на некоторых платформах - помещение обработчика onBlur в тэг FRAMESET не даёт никакого эффекта.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.

Примеры

Пример 1: Проверка данных, введённых в форму. В следующем примере userName это необходимое текстовое поле. Если пользователь пытается покинуть это поле, обработчик onBlur вызывает функцию required для подтверждения того, что userName имеет верное значение.

<INPUT TYPE="text" VALUE="" NAME="userName"

   onBlur="required(this.value)">

Пример 2: Изменение цвета фона документа. Обработчики onBlur и onFocus окна изменяют цвет фона окна, в зависимости от того, имеет окно фокус или нет.

<BODY BGCOLOR="lightgrey"
   onBlur="document.bgColor='lightgrey'"

   onFocus="document.bgColor='antiquewhite'">

Пример 3: Изменение цвета фона фрэйма. Этот пример создаёт 4 фрэйма. Документ-источник для каждого фрэйма, onblur2.html, имеет тэг BODY с обработчиками onBlur и onFocus, показанными в Примере 1. Когда документ загружается, все фрэймы имеют светло-серый цвет. Когда пользователь щёлкает по фрэйму, обработчик onFocus изменяет цвет фона фрэйма на antique white. Фрэйм, теряющий фокус, становится светло-серым. Обратите внимание, что обработчики onBlur и onFocus находятся внутри тэга BODY, а не тэга FRAME.

<FRAMESET ROWS="50%,50%" COLS="40%,60%">
<FRAME SRC=onblur2.html
NAME="frame1">
<FRAME SRC=onblur2.html NAME="frame2">
<FRAME SRC=onblur2.html
NAME="frame3">
<FRAME SRC=onblur2.html NAME="frame4">
</FRAMESET>

Следующий код даёт тот же эффект, что и предыдущий, но реализован иначе. Обработчики onFocus и onBlur ассоциируются с фрэймом, но не с документом. Обработчики onBlur и onFocus для фрэйма специфицируются путём установки свойств onblur и onfocus.

<SCRIPT>
function setUpHandlers() {
   for
(var i = 0; i < frames.length; i++) {
      frames[i].onfocus=new
Function("document.bgColor='antiquewhite'")
      frames[i].onblur=new
Function("document.bgColor='lightgrey'")
   }
}
</SCRIPT>

<FRAMESET ROWS="50%,50%" COLS="40%,60%" onLoad=setUpHandlers()>

<FRAME SRC=onblur2.html NAME="frame1">
<FRAME SRC=onblur2.html NAME="frame2">

<FRAME SRC=onblur2.html NAME="frame3">
<FRAME SRC=onblur2.html NAME="frame4">

</FRAMESET>

Пример 4: Закрытие окна. Обработчик onBlur окна закрывает окно, когда оно теряет фокус.

<BODY onBlur="window.close()">
This is some text
</BODY>

См. также

event, onChange, onFocus

onChange

Выполняет код JavaScript, когда возникает событие change; то есть, если поле Select, Text или Textarea теряет фокус, а его значение было изменено.

Обработчик события для

FileUpload, Select, Text, Textarea

Реализован в

JavaScript 1.0: обработчик события для элементов Select, Text и Textarea

JavaScript 1.1: добавлен обработчик для FileUpload

Синтаксис

onChange="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Описание

Используйте onChange для проверки данных после их изменения пользователем.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.

Примеры

Здесь userName этот текстовое поле. Если пользователь изменяет текст и покидает поле, обработчик onChange вызывает функцию checkValue для подтверждения верности значения userName.

<INPUT TYPE="text" VALUE="" NAME="userName"

   onChange="checkValue(this.value)">

См. также

event, onBlur, onFocus

onClick

Выполняет код JavaScript, когда возникает событие click; то есть, когда сделан щелчок по объекту или форме. (Событие click является комбинацией событий MouseDown и MouseUp).

Обработчик события для

Button, document, Checkbox, Link, Radio, Reset, Submit

Реализован в

JavaScript 1.0

JavaScript 1.1: добавлена возможность возвращать false для отмены акции, ассоциированной с событием click.

Синтаксис

onClick="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание свойства
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
Когда сделан щелчок по гиперссылке, layerX, layerY, pageX, pageY, screenX, screenY	Представляет местоположение курсора в момент возникновения события.
which	Представляет 1 для щелчка левой клавиши мыши и 3 - для щелчка правой клавиши.
modifiers	Содержит список клавиш-модификаторов, нажатых при возникновении события.

Описание

Для переключателей/checkboxes, гиперссылок, радио-кнопок, кнопок reset и кнопок submit обработчик onClick может вернуть false для отмены акции, нормально ассоциированной с событием click.

Например, следующий код создаёт ссылку, которая при щелчке по ней выводит диалог confirm. Если пользователь щёлкает ссылку, а затем выбирает cancel, страница, специфицированная ссылкой, не загружается.

<A HREF = "http://home.netscape.com/"
   onClick="return confirm('Load Netscape home page?')">Netscape</A>

Если обработчик возвращает false, акция по умолчанию объекта отменяется так:

Кнопки -- нет акции по умолчанию; ничего не отменяется.
Радио-кнопки и переключатели -- ничего не устанавливается.
Кнопки submit -- форма не отправляется.
Кнопки reset -- значения формы не восстанавливаются.

ПРИМЕЧАНИЕ: В JavaScript 1.1 на некоторых платформах возвращение false обработчиком onClick для кнопок reset не даёт эффекта.

Примеры

Пример 1: Вызов функции при щелчке пользователя по кнопке. Предположим, Вы создали функцию JavaScript compute. Можно выполнить функцию compute, когда пользователь щёлкает кнопку и вызывает функцию с помощью обработчика onClick:

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">

В этом примере ключевое слово this ссылается на текущий объект; в данном случае это кнопка Calculate. Конструкция this.form ссылается на форму, содержащую кнопку.

В следующем примере предположим, что Вы создали функцию JavaScript pickRandomURL, которая позволяет выбрать случайный URL. Можно использовать onClick для динамического специфицирования значения атрибута HREF тэга A, как показано здесь:

<A href="books-page-javascript-javascript_13-"
   onClick="this.href="books-page-javascript-javascript_13-ickRandomURL()"

   onMouseOver="window.status='Pick a random URL'; return true">
Go!</A>

Обработчик onMouseOver специфицирует специальное сообщение для вывода в строке состояния браузера, когда пользователь помещает указатель мыши над якорем Go!. Как видно из этого примера, Вы обязаны возвратить true, чтобы установить свойство window.status в обработчике onMouseOver.

Пример 2: Отмена выделения переключателя/checkbox. В следующем примере создаётся переключатель с обработчиком onClick. Обработчик события выводит диалог confirm, который предупреждает пользователя, что выделение переключателя (установка "птички") уничтожит все файлы. Если пользователь выберет Cancel, onClick возвратит false, и переключатель останется невыделенным.

<INPUT TYPE="checkbox" NAME="check1" VALUE="check1"

   onClick="return confirm('This purges all your files. Are you sure?')"> Remove files

См. также

event

onDblClick

Выполняет код JavaScript при возникновении события DblClick; то есть, когда пользователь дважды щёлкнет элемент формы или гиперссылку.

Обработчик события для	document, Link
Реализован в	JavaScript 1.2

Синтаксис

onDblClick="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

ПРИМЕЧАНИЕ: DblClick не реализован на Macintosh.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY	Представляет местонахождение курсора в момент возникновения события.
which	Представляет 1 для щелчка левой клавиши мыши и 3 - для щелчка правой клавиши.
modifiers	Содержит список клавиш-модификаторов, нажатых при возникновении события.

Пример

Здесь диалог alert выводится, если пользователь дважды щёлкнет кнопку:

<form>
<INPUT Type="button" Value="Double Click Me!"

onDblClick="alert('You just double clicked me!')">
</form>

См. также

event

onDragDrop

Выполняет код JavaScript при возникновении события DragDrop; то есть, если пользователь отпустит объект в окне браузера, как при перетаскивании файлов.

Обработчик события для	window
Реализован в	JavaScript 1.2

Синтаксис

onDragDrop="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
data	Возвращает массив строк, содержащих URL'ы отпущенных объектов.
modifiers	Содержит список клавиш-модификаторов, нажатых при возникновении события.
screenX, screenY	Представляет местонахождение курсора в момент возникновения события.

Безопасность

Получение свойства data события DragDrop требует привилегии UniversalBrowserRead. О безопасности см. книгу Клиентский JavaScript. Руководство.

Описание

Событие DragDrop возникает тогда, когда системный объект (файл, ярлык и т.п.) отпускается в окне браузера с использование системного механизма drag and drop. Нормальной реакцией браузера будет попытка загрузить объект в окно браузера. Если обработчик для события DragDrop возвратит true, браузер загружает объект нормальным образом. Если обработчик возвратит false, drag and drop отменяется.

См. также

event

onError

Выполняет код JavaScript при возникновении события error/ошибки; то есть, когда при загрузке документа или изображения возникает ошибка.

Обработчик события для	Image, window
Реализован в	JavaScript 1.1

Синтаксис

onError="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Описание

Событие error возникает только тогда, когда возникает ошибка синтаксиса JavaScript или ошибка времени выполнения, а не при появлении ошибки браузера. Например, если Вы попытаетесь установить window.location.href='notThere.html', а файл notThere.html не существует, результирующим сообщением об ошибке будет сообщение браузера; следовательно, onError не будет перехватывать это сообщение. Однако событие error будет включаться неверным URL в тэге IMG или неверными данными изображения.

window.onerror применяется только к ошибкам, которые возникают в окне, содержащем window.onerror, но не к ошибкам в других окнах.

onError может иметь следующие значения:

null для подавления всех диалогов JavaScript об ошибках. Установка window.onerror в null означает, что Ваши пользователи не увидят ошибок JavaScript, вызванных Вашим кодом.
Имя функции, обрабатывающей ошибки (аргументами являются текст сообщения, URL и номер строки с ошибкой). Для подавления стандартного диалога JavaScript об ошибках эта функция обязана возвращать true. См. Пример 3 ниже.
Переменная или свойство, содержащее null или верную ссылку на функцию.

Если Вы пишете функцию-обработчик ошибок, у Вас есть три опции для сообщения об ошибках:

Отслеживать ошибки, но дать возможность сообщать о них через стандартный диалог JavaScript (использовать функцию обработки ошибок, которая возвращает false или не возвращает значение).
Самостоятельно сообщать об ошибках и отключить стандартный диалог (использовать функцию обработки ошибок, возвращающую true).
Отключить все сообщения об ошибках (установить null в обработчик onError).

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.

Примеры

Пример 1: Обработчик со значением Null. В этом тэге IMG код onError="null" подавляет сообщения об ошибках, если ошибка возникает при загрузке изображения.

<IMG NAME="imageBad1" src="books/javascript/javascript_13/corrupt.gif" ALIGN="left" BORDER="2"

   onError="null">

Пример 2: Обработчик с Null для окна. Обработчик onError для окна не может быть выражен через HTML. Следовательно, Вы обязаны ввести всё необходимое, в нижнем регистре, в тэге SCRIPT. Следующий код присваивает null обработчику onError для всего окна, а не только для объекта Image. Это подавляет все сообщения JavaScript об ошибках, включая сообщения для объекта Image.

<SCRIPT>
window.onerror=null
</SCRIPT>

<IMG NAME="imageBad1" src="books/javascript/javascript_13/corrupt.gif" ALIGN="left" BORDER="2">

Однако, если объект Image имеет свой специальный обработчик onError, этот обработчик будет выполняться при возникновении ошибки с изображением. Это происходит из-за того что window.onerror=null подавляет сообщения об ошибках JavaScript, а не обработчиков onError.

<SCRIPT>
window.onerror=null

function myErrorFunc() {
   alert("The image had a nasty error.")
}
</SCRIPT>

<IMG NAME="imageBad1" src="books/javascript/javascript_13/corrupt.gif" ALIGN="left" BORDER="2"

   onError="myErrorFunc()">

В следующем примере window.onerror=null подавляет все сообщения об ошибках. Без onerror=null код вызовет ошибку переполнения стэка, так как здесь имеется бесконечная рекурсия.

<SCRIPT>
window.onerror = null;
function testErrorFunction() {

   testErrorFunction();
}
</SCRIPT>
<BODY onload="testErrorFunction()">

test message
</BODY>

Пример 3: Функция обработки ошибок. Здесь определена функция myOnError, которая перехватывает ошибки JavaScript. Эта функция использует три массива для хранения сообщения, URL и строки-нарушителя для каждой ошибки. Если пользователь щёлкает кнопку Display Error Report, функция displayErrors открывает окно и создаёт в нём сообщение об ошибке. Заметьте, что эта функция возвращает true для подавления стандартного диалога JavaScript об ошибке.

<SCRIPT>
window.onerror = myOnError

msgArray = new Array()
urlArray = new Array()
lnoArray = new Array()

function myOnError(msg, url, lno) {
   msgArray[msgArray.length]
= msg
   urlArray[urlArray.length] = url
   lnoArray[lnoArray.length]
= lno
   return true
}

function displayErrors() {

   win2=window.open('','window2','scrollbars=yes')

   win2.document.writeln('<B>Error Report</B><P>')

   for (var i=0; i < msgArray.length; i++) {

      win2.document.writeln('<B>Error in file:</B> '
+ urlArray[i] + '<BR>')
      win2.document.writeln('<B>Line
number:</B> ' + lnoArray[i] + '<BR>')

      win2.document.writeln('<B>Message:</B> '
+ msgArray[i] + '<P>')
   }
   win2.document.close()
}

</SCRIPT>

<BODY onload="noSuchFunction()">
<FORM>

<BR><INPUT TYPE="button" VALUE="This button has a syntax error"

   onClick="alert('unterminated string')">

<P><INPUT TYPE="button" VALUE="Display Error Report"

   onClick="displayErrors()">
</FORM>

Этот пример даст на выходе:

Error Report

Error in file:
file:///c%7C/temp/onerror.html
Line number: 34
Message: unterminated string literal

Error in file: file:///c%7C/temp/onerror.html
Line number:
34
Message: missing ) after argument list

Error in file: file:///c%7C/temp/onerror.html
Line number: 30

Message: noSuchFunction is not defined

Пример 4: Обработчик события вызывает функцию. В тэге IMG обработчик onError вызывает функцию badImage при возникновении ошибок во время загрузки изображения.

<SCRIPT>
function badImage(theImage) {

   alert('Error: ' + theImage.name + ' did not load properly.')
}
</SCRIPT>

<FORM>
<IMG NAME="imageBad2" src="books/javascript/javascript_13/orca.gif" ALIGN="left" BORDER="2"

   onError="badImage(this)">
</FORM>

См. также

event, onAbort, onLoad

onFocus

Выполняет код JavaScript при возникновении события focus; то есть, если окно, фрэйм или набор фрэймов получает фокус или если элемент формы получает фокус.

Обработчик события для

Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window

Реализован в

JavaScript 1.0

JavaScript 1.1: обработчик для объектов Button, Checkbox, FileUpload, Frame, Password, Radio, Reset, Submit и window

JavaScript 1.2: обработчик для Layer

Синтаксис

onFocus="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Описание

Событие focus может быть результатом работы метода focus, или щелчка мышью по объекту или окну, или при переходе с помощью клавиш табуляции. Выделение в поле даст событие select, а не событие focus. onFocus выполняет код JavaScript при возникновении события focus.

Обработчик onFocus фрэйма переопределяет обработчик onFocus тэга BODY документа, загруженного в этот фрэйм.

Обратите внимание, что помещение диалога alert в обработчик onFocus приводит к рекурсии диалогов alert: если Вы нажимаете OK для выключения alert, окно получает фокус снова и производит новое событие focus.

ПРИМЕЧАНИЕ: В JavaScript 1.1 на некоторых платформах размещение обработчика onFocus в тэге FRAMESET не даст эффекта.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.

Примеры

Здесь обработчик onFocus используется в объекте valueField Textarea для вызова функции valueCheck.

<INPUT TYPE="textarea" VALUE="" NAME="valueField"

   onFocus="valueCheck()">

См. также примеры для onBlur.

См. также

event, onBlur, onChange

onKeyDown

Выполняет код JavaScript при возникновении события KeyDown; то есть, если пользователь нажимает клавишу на клавиатуре.

Обработчик события для	document, Image, Link, Textarea
Реализован в	JavaScript 1.2

Синтаксис

onKeyDown="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY	Для события поверх окна, представляет местонахождение курсора в момент возникновения события. Для события поверх формы, представляет позицию элемента формы.
which	ASCII-значение нажатой клавиши. Для получения реальной буквы, цифры или символа нажатой клавиши используйте метод String.fromCharCode. Для установки этого свойства, когда значение ASCII неизвестно, используйте метод String.charCodeAt.
modifiers	Содержит список клавиш-модификаторов, нажатых при возникновении события.

Описание

Событие KeyDown всегда возникает до события KeyPress. Если onKeyDown возвращает false, событие KeyPress не возникает. Это предотвращает появление событий KeyPress при удерживании пользователем клавиши в нажатом состоянии.

Пример

Здесь использована функция blockA для вычисления символов, введённых с клавиатуры в текстовый бокс textentry. Если пользователь вводит "a" или "A", функция возвращает false, а текстовый бокс не отображает значение.

<form name="main">
   <input name="textentry"
type=text size=10 maxlength=10>
</form>

<script>
function blockA(e) {

var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
return false;

}

document.main.textentry.onkeydown = blockA;
</script>

В этой функции свойство which события присваивает ASCII-значение нажатой пользователем клавиши переменной keyChar. Оператор if вычисляет keyChar и возвращает false для специфицированных символов.

См. также

event, onKeyPress, onKeyUp

onKeyPress

Выполняет код JavaScript при возникновении события KeyPress; то есть, если пользователь удерживает клавишу нажатой.

Обработчик события для	document, Image, Link, Textarea
Реализован в	JavaScript 1.2

Синтаксис

onKeyPress="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY	Для события поверх окна представляет местонахождение курсора в момент возникновения события. Для события поверх формы представляет позицию элемента формы.
which	ASCII-значение нажатой клавиши. Для получения реальной буквы, цифры или символа нажатой клавиши используйте метод String.fromCharCode. Для установки этого свойства, когда значение ASCII неизвестно, используйте метод String.charCodeAt.
modifiers	Содержит список клавиш-модификаторов, нажатых при возникновении события.

Описание

Событие KeyPress возникает сразу после события KeyDown только тогда, когда onKeyDown возвращает что-либо, отличное от false. Событие KeyPress возникает повторно до тех пор, пока пользователь не отпустит клавишу. Вы может отменять индивидуальные события KeyPress.

Пример

Здесь метод captureEvents отлавливает ввод с клавиатуры, а обработчик onKeyPress вызывает функцию blockA для проверки нажатий клавиш. Если нажимаются клавиши "a" или "z", функция прокручивает окно Navigator'а.

function blockA(e) {
var keyChar = String.fromCharCode(e.which);

if (keyChar == 'A' || keyChar == 'a')
self.scrollBy(10,10);


else if(keyChar == 'Z' || keyChar == 'z')
self.scrollBy(-10,-10);

else return false;
}

document.captureEvents(Event.KEYPRESS);
document.onkeypress = blockA;

См. также

event, onKeyDown, onKeyUp

onKeyUp

Выполняет код JavaScript при возникновении события KeyUp; то есть, если пользователь отпустил нажатую клавишу.

Обработчик события для	document, Image, Link, Textarea
Реализован в	JavaScript 1.2

Синтаксис

onKeyUp="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY	Для события поверх окна представляет местонахождение курсора в момент возникновения события. Для события поверх формы представляет позицию элемента формы.
which	ASCII-значение нажатой клавиши. Для получения реальной буквы, цифры или символа нажатой клавиши используйте метод String.fromCharCode. Для установки этого свойства, когда значение ASCII неизвестно, используйте метод String.charCodeAt.
modifiers	Содержит список клавиш-модификаторов, нажатых при возникновении события.

Пример

Здесь метод captureEvents отлавливает ввод с клавиатуры, а обработчик onKeyUp вызывает функцию Key_Up. Метод alert функции открывает диалоговое окно для отображения значения нажатой клавиши.

function Key_Up(e) {
var keyChar = String.fromCharCode(e.which);

alert("Hold '" + keyChar +"' again for me, okay?");
}
document.onkeyup=Key_Up;

document.captureEvents(Event.KEYUP);

См. также

event

onLoad

Выполняет код JavaScript при возникновении события load; то есть, когда браузер закончил загрузку окна или всех фрэймов тэга FRAMESET.

Обработчик события для

Image, Layer, window

Реализован в

JavaScript 1.0

JavaScript 1.1: обработчик для Image

Синтаксис

onLoad="handlerText"

Параметры

handlerText

Код JavaScript или вызов функции JavaScript.

Описание

Используйте обработчик onLoad в тэге BODY или FRAMESET, например, < BODY onLoad="...">.

Для тэгов FRAMESET и FRAME: событие обработчика onLoad во фрэйме (помещённого в тэг BODY) возникает до onLoad тэга FRAMESET (помещённого в тэг FRAMESET).

Для изображений обработчик onLoad указывает скрипт, исполняемый при выводе изображения. Не путайте вывод изображения с загрузкой изображения. Вы можете загрузить несколько изображений, затем вывести их поочерёдно в одном и том же объекте Image путём установки свойства src объекта. Если Вы изменяете изображение, выводимое таким образом, onLoad выполняется каждый раз при выводе изображения, а не только при загрузке изображений в память.

Если Вы специфицируете обработчик onLoad для объекта Image, который выводит циклическую GIF-анимацию (multi-image GIF), каждый цикл анимации включает обработчик onLoad, и обработчик выполняется однократно для каждого цикла.

Можно использовать обработчик onLoad для создания анимации JavaScript путём повторяющейся установки свойства src объекта Image. См. Image.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
width, height	Для события поверх окна, но не поверх слоя/layer, эти свойства представляют ширину и высоту окна.

Примеры

Пример 1: Вывод сообщения при загрузке страницы. Здесь обработчик onLoad выводит приветствие после загрузки страницы.

<BODY onLoad="window.alert("Welcome to the Brave
New World home page!")>

Пример 2: Вывод сообщения при загрузке изображения. Здесь создаются два объекта Image: один - конструктором Image, а второй - тэгом IMG. Каждый объект Image имеет обработчик onLoad, который вызывает функцию displayAlert, выводящую сообщение. Для изображения, созданного тэгом IMG, диалог alert отображает имя изображения. Для изображения, созданного конструктором Image, alert выводит сообщение без имени изображения. Это происходит из-за того, что обработчик onLoad для объекта, созданного конструктором Image, обязан быть именем функции и он не может специфицировать параметры для функции displayAlert.

<SCRIPT>
imageA = new Image(50,50)
imageA.onload=displayAlert

imageA.src="books/javascript/javascript_13/cyanball.gif"

function displayAlert(theImage) {

   if (theImage==null) {
      alert('An image loaded')

   }
   else alert(theImage.name + ' has been loaded.')
}

</SCRIPT>

<IMG NAME="imageB" src="books/javascript/javascript_13/greenball.gif" ALIGN="top"

   onLoad=displayAlert(this)><BR>

Пример 3: Циклический вывод GIF-анимации. Здесь выводится изображение birdie.gif, которое является анимированным изображением GIF. Обработчик onLoad увеличивает переменную cycles, которая отслеживает количество циклов анимации. Чтобы увидеть значение cycles, пользователь щёлкает кнопку Count Loops.

<SCRIPT>
var cycles=0
</SCRIPT>

<IMG ALIGN="top" src="books/javascript/javascript_13/birdie.gif" BORDER=0
   onLoad="++cycles">

<INPUT TYPE="button" VALUE="Count Loops"
   onClick="alert('The animation has
looped ' + cycles + ' times.')">

Пример 4: Изменение отображаемой GIF-анимации. Это пример использует обработчик onLoad для ротации шести GIF-анимаций. Каждая анимация показывается как последовательность отдельных объектов Image. Когда документ загружается, выводится !anim0.html. Когда эта анимация завершается, обработчик onLoad вызывает загрузку следующего файла, !anim1.html, вместо первого файла. После завершения последней анимации, !anim5.html, вновь отображается первый файл. Заметьте, что функция changeAnimation не вызывает сама себя после изменения свойства src объекта Image. Это происходит, потому что свойство src изменяется, обработчик onLoad изображения включается и вызывается функция changeAnimation.

<SCRIPT>
var whichImage=0
var maxImages=5

function changeAnimation(theImage) {
   ++whichImage

   if (whichImage <= maxImages) {

      var imageName="!anim" + whichImage + ".gif"

      theImage.src=imageName
   } else {

      whichImage=-1
      return
   }
}
</SCRIPT>

<IMG NAME="changingAnimation"
src="books/javascript/javascript_13/!anim0.gif" BORDER=0 ALIGN="top"
   onLoad="changeAnimation(this)">

См. также примеры для Image.

См. также

event, onAbort, onError, onUnload

onMouseDown

Выполняет код JavaScript, когда возникает событие MouseDown; то есть, когда пользователь нажимает клавишу мыши.

Обработчик события для	Button, document, Link
Реализован в	JavaScript 1.2

Синтаксис

onMouseDown="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY	Местонахождение курсора в момент возникновения события MouseDown.
which	Представляет 1 для щелчка левой клавиши мыши и 3 - для щелчка правой клавиши.
modifiers	Содержит список клавиш-модификаторов, нажатых в момент возникновения события MouseDown.

Описание

Если onMouseDown возвращает false, акция по умолчанию (вход в режим drag, вход в режим selection или активизация гиперссылки) отменяется.

Активизация вызывается событием MouseDown на гиперссылке. Если ссылка активизирована, она изменяет свой цвет, указывая на новое состояние.

Пример

Здесь пользователь может переместить изображение на странице HTML путём перетаскивания его с помощью мыши. Ваш код HTML определяет изображение и позиционирует его в слое с названием container1. В коде JavaScript обработчики событий устанавливают свойства позиционирования container1 при перетаскивании изображения пользователем, создавая анимацию.

С использованием таблиц стилей/style sheets, изображение первоначально определено и позиционировано так:

<HEAD>
<STYLE type="text/css">
   #container1 {
position:absolute; left:200; top:200}
</STYLE>
</HEAD>

<BODY>

<P ID="container1">
<img src="books/javascript/javascript_13/backgrnd.gif" name="myImage" width=96 height=96>

</P>
</BODY>

В вышеприведённом коде HTML атрибут ID элемента P, который содержит изображение, установлен в container1, делая container1 уникальным идентификатором параграфа и изображения. Тэг STYLE создаёт слой для container1 и позиционирует его.

Следующий код JavaScript определяет обработчики onMouseDown, onMouseUp и onMouseMove:

<SCRIPT>
container1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);

container1.onmousedown=DRAG_begindrag;
container1.onmouseup=DRAG_enddrag;

var DRAG_lastX, DRAG_lastY, DRAG_dragging;
function DRAG_begindrag(e) {
if (e.which == 1) {

window.captureEvents(Event.MOUSEMOVE);
      window.onmousemove=DRAG_drag;

DRAG_lastX=e.pageX;
DRAG_lastY=e.pageY;
DRAG_dragging=true;
return false;
}
else {

/*Здесь какая-нибудь работа по обработке нажатия правой клавиши мыши*/
return true;
}
}
function DRAG_enddrag(e) {

if (e.which == 1) {
window.releaseEvents(Event.MOUSEMOVE);
      
window.onmousemove=null
DRAG_dragging=false;
return false;
}
else {

/*Здесь какая-нибудь работа по обработке нажатия правой клавиши мыши*/
return true;
}
}
function DRAG_drag(e) {

if (DRAG_dragging) {
/*Эта функция вызывается только в случае захвата MOUSEMOVE*/

moveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);
DRAG_lastX = e.pageX;
DRAG_lastY = e.pageY;

return false;
}
else {
return true;
}
}
</SCRIPT>

В этом коде метод captureEvents захватывает события MouseUp и MouseDown. Функции DRAG_begindrag и DRAG_enddrag соответственно вызываются для обработки этих событий.

Если пользователь нажимает левую клавишу мыши, функция DRAG_begindrag стартует, захватывая события MouseMove и сообщая функции DRAG_drag о необходимости их обработки. Затем она присваивает значение свойства pageX события MouseDown свойству DRAG_lastX, значение свойства pageY - свойству DRAG_lastY и true - свойству DRAG_dragging.

Функция DRAG_drag вычисляет DRAG_dragging, чтобы гарантировать, что событие MouseMove было захвачено функцией DRAG_begindrag, затем использует метод moveBy для позиционирования объекта и присваивает значения свойствам DRAG_lastX и DRAG_lastY.

Когда пользователь отпускает левую клавишу мыши, функция DRAG_enddrag останавливает захват событий MouseMove. DRAG_enddrag затем гарантирует, что никакие другие функции не вызываются, устанавливая onmousemove в Null и DRAG_dragging - в false.

См. также

event

onMouseMove

Выполняет код JavaScript, когда возникает событие MouseMove; то есть, когда пользователь перемещает курсор.

Обработчик события для	Объект отсутствует.
Реализован в	JavaScript 1.2

Синтаксис

onMouseMove="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Событие

Поскольку перемещения мыши происходят очень часто, по умолчанию onMouseMove не является обработчиком для какого-либо объекта. Вы можете явно установить его для ассоциирования с определённым объектом.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY	Местонахождение курсора в момент возникновения события MouseMove.

Описание

Событие MouseMove высылается только тогда, когда захват события запрашивается объектом. О событиях см. книгу Клиентский JavaScript. Руководство.

Примеры

См. примеры для onMouseDown.

См. также

event, document.captureEvents

onMouseOut

Выполняет код JavaScript, когда возникает событие MouseOut; то есть каждый раз выходе указателя мыши за пределы области (в клиентской карте изображений) или гиперссылки.

Обработчик события для	Layer, Link
Реализован в	JavaScript 1.1

Синтаксис

onMouseOut="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Описание

если указатель мыши переходит из одной области клиентской карты изображений в другую, Вы получите сначала onMouseOut для первой области, а затем onMouseOver - для второй области.

Тэги Area, использующие onMouseOut, обязаны иметь атрибут HREF в тэге AREA.

Вы обязаны возвратить true в обработчике события, если хотите установить свойства status или defaultStatus с помощью onMouseOver.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY	Местонахождение курсора в момент возникновения события MouseOut.

Примеры

См. примеры для Link.

См. также

event, onMouseOver

onMouseOver

Выполняет код JavaScript, когда возникает событие MouseOver; то есть всякий раз при проведении указателя мыши над объектом или областью.

Обработчик события для

Layer, Link

Реализован в

JavaScript 1.0

JavaScript 1.1: обработчик для Area

Синтаксис

onMouseOver="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Описание

Если мышь проводится из одной области клиентской карты изображений в другую, Вы получите onMouseOut для первой области, а затем onMouseOver - для второй области.

Тэги Area, использующие onMouseOver, обязаны иметь атрибут HREF в тэге AREA.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY	Местонахождение курсора в момент возникновения события MouseOver.

Примеры

По умолчанию значение HREF якоря отображается в статусной строке в нижней части браузера, когда пользователь помещает указатель мыши над якорем. В следующем примере onMouseOver выводит специальное сообщение "Click this if you dare."

<A href="index.php?name=go&url=http%3A%2F%2Fhome.netscape.com%2F"

   onMouseOver="window.status='Click this if you dare!'; return true">

Click me</A>

См. в onClick пример использования onMouseOver, когда атрибут HREF тэга A устанавливается динамически.

См. также примеры для Link.

См. также

event, onMouseOut

onMouseUp

Выполняет код JavaScript, когда возникает событие MouseUp; то есть, когда пользователь отпускает нажатую клавишу мыши.

Обработчик события для	Button, document, Link
Реализован в	JavaScript 1.2

Синтаксис

onMouseUp="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY	Местонахождение курсора в момент возникновения события MouseUp.
which	Представляет 1 для левой клавиши и 3 - для правой клавиши мыши.
modifiers	Содержит список клавиш-модификаторов, нажатых в момент возникновения события MouseUp.

Описание

Если onMouseUp возвращает false, акция по умолчанию отменяется. Например, если onMouseUp возвращает false при активной гиперссылке, ссылка не включается. Итак, если MouseUp возникает при неактивной гиперссылке (возможно, в том случае, когда onMouseDown возвращает false), ссылка не включается.

ПРИМЕЧАНИЕ: Активизация вызывается событием MouseDown на ссылке. Если ссылка активна, она изменяет свой цвет для отражения нового состояния.

Примеры

См. примеры для onMouseDown.

См. также

event

onMove

Выполняет код JavaScript, когда возникает событие перемещения; то есть, если пользователь или скрипт перемещает окно или фрэйм.

Обработчик события для	window
Реализован в	JavaScript 1.2

Синтаксис

onMove="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
screenX, screenY	Позиция верхнего левого угла окна или фрэйма.

Пример

Здесь функция open_now создаёт окно myWin и захватывает события Move. Обработчик onMove вызывает другую функцию, которая выводит сообщение, когда пользователь перемещает myWin.

function open_now(){
var myWin;
myWin=window.open("","displayWindow","width=400,height=400,menubar=no,
location=no,alwaysRaised=yes");
var text="<html><head><title>Test</title></head>"
+"<body bgcolor=white><h1>Please move this window</h1></body>"+"</html>";
myWin.document.write(text);
myWin.captureEvents(Event.MOVE);

myWin.onmove=fun2;
}

function fun2(){

alert("Hey you moved me!");
this.focus(); //'this' указывает на текущий объект
}

См. также

event

onReset

Выполняет код JavaScript, когда возникает событие reset; то есть, когда пользователь восстанавливает значения элементов формы (щёлкая кнопку Reset).

Обработчик события для	Form
Реализован в	JavaScript 1.1

Синтаксис

onReset="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Пример

Следующий пример выводит объект Text со значением по умолчанию "CA" и кнопкой reset. Если пользователь вводит аббревиатуру названия штата в объект Text и щёлкает на кнопке reset, восстанавливается оригинальное значение "CA". Обработчик onReset формы выводит сообщение, указывающее, что восстановлены значения по умолчанию.

<FORM NAME="form1" onReset="alert('Defaults have been restored.')">

State:
<INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"><P>

<INPUT TYPE="reset" VALUE="Clear Form" NAME="reset1">
</FORM>

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.

См. также

event, Form.reset, Reset

onResize

Выполняет код JavaScript, когда возникает событие resize; то есть, когда пользователь или скрипт изменили размер окна или фрэйма.

Обработчик события для	window
Реализован в	JavaScript 1.2

Синтаксис

onResize="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.
width, height	Ширина и высота окна или фрэйма.

Описание

Этот обработчик высылается после завершения отображения HTML с новыми размерами внутреннего окна. Это позволяет позиционировать элементы и именованные якоря так, чтобы они имели свои запрашиваемые окончательные размеры и местоположение, свойства SRC изображений могли восстанавливаться динамически и т.д.

Пример

Здесь функция open_now создаёт окно myWin и захватывает события Resize. Обработчик onResize вызывает функцию alert_me, которая выводит сообщение, если пользователь изменяет размер окна myWin.

function open_now(){
var myWin;

myWin=window.open("","displayWin","width=400,height=300,resizable=yes,

menubar=no,location=no,alwaysRaised=yes");
var text="<html><head><title>Test</title></head>"

+"<body bgcolor=white><h1>Please resize me</h1></body>"

+"</html>";
myWin.document.write(text);
myWin.captureEvents(Event.RESIZE);

myWin.onresize=alert_me;
}


function alert_me(){
alert("You resized me! \nNow my outer width: " + this.outerWidth +

"\n and my outer height: " +this.outerHeight);
this.focus();
}

См. также

event

onSelect

Выполняет код JavaScript, когда возникает событие select; то есть, когда пользователь выделяет некоторый текст в поле text или textarea.

Обработчик события для	Text, Textarea
Реализован в	JavaScript 1.0

Синтаксис

onSelect="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.

Пример

Здесь onSelect используется в Text-объекте valueField для вызова функции selectState.

<INPUT TYPE="text" VALUE="" NAME="valueField" onSelect="selectState()">

См. также

event

onSubmit

Выполняет код JavaScript, когда возникает событие submit; то есть, когда пользователь отправляет форму на сервер.

Обработчик события для	Form
Реализован в	JavaScript 1.0

Синтаксис

onSubmit="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Безопасность

Отправка формы по URL mailto: или news: требует привилегии UniversalSendMail. О безопасности см. книгу Клиентский JavaScript. Руководство.

Описание

Можно использовать onSubmit для предотвращения отправки формы; для этого поместите оператор return, возвращающий false, в этот обработчик события. Любые другие значения разрешают отправку формы. При отсутствии оператора return форма будет отправлена.

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.

Пример

Здесь onSubmit вызывает функцию validate для вычисления отправляемых данных. Если данные верны, форма отправляется; иначе форма не отправляется.

<FORM onSubmit="return validate(this)">
...
</FORM>

См. также примеры для Form.

См. также

event, Submit, Form.submit

onUnload

Выполняет код JavaScript, когда возникает unload; то есть, когда пользователь выходит из документа.

Обработчик события для	window
Реализован в	JavaScript 1.0

Синтаксис

onUnload="handlerText"

Параметр

handlerText

Код JavaScript или вызов функции JavaScript.

Описание

Используйте onUnload с тэгами BODY или FRAMESET, например, <BODY onUnload="...">.

Относительно фрэймов и набора фрэймов - обработчик onUnload фрэйма (помещённый в тэг BODY) появляется до появления обработчика onUnload набора фрэймов (помещённого в тэг FRAMESET).

Используемые свойства события

Свойство	Описание
type	Указывает тип события.
target	Указывает объект, которому событие первоначально было выслано.

Пример

Здесь onUnload вызывает функцию cleanUp для выполнения некоторого процессинга при окончании работы, когда пользователь выходит из страницы (закрывает её):

<BODY onUnload="cleanUp()">

См. также

onLoad

Общую информацию об обработчиках событий см. в книге Клиентский JavaScript. Руководство.

Об объекте event см. event.

Оглавление | Назад | Вперёд | Индекс

Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation

Книги-online

Глава 3 Обработчики Событий

onAbort

Синтаксис

Параметр

Используемые свойства события

Пример

См. также

onBlur

Синтаксис

Параметр

Описание

Используемые свойства события

Примеры

См. также

onChange

Синтаксис

Параметр

Описание

Используемые свойства события

Примеры

См. также

onClick

Синтаксис

Параметр

Используемые свойства события

Описание

Примеры

См. также

onDblClick

Синтаксис

Параметр

Используемые свойства события

Пример

См. также

onDragDrop

Синтаксис

Параметр

Используемые свойства события

Безопасность

Описание

См. также

onError

Синтаксис

Параметр

Описание

Используемые свойства события

Примеры

См. также

onFocus

Синтаксис

Параметр

Описание

Используемые свойства события

Примеры

См. также

onKeyDown

Синтаксис

Параметр

Используемые свойства события

Описание

Пример

См. также

onKeyPress

Синтаксис

Параметр

Используемые свойства события

Описание

Пример

См. также

onKeyUp

Синтаксис

Параметр

Используемые свойства события

Пример

См. также

onLoad

Синтаксис

Параметры

Описание

Глава 3
Обработчики Событий