JavaScript 3 урок обработчики событий

Давайте напишем нашу первую программу. Для этого сделаем исключение и поместим наш javascript-код на html-странице. Итак, откройте (или создайте) html-страницу и поместите в нее следующий код:

<html> <head> <title>Заголовок документа</title> <link rel="stylesheet" type="text/css" href="style.css"> <script language="javascript"> document.write("Моя первая страница."); </script> </head> <body> </body></html>

Откройте эту страницу в браузере, она выглядит так:

JavaScript 3 урок обработчики событий - student2.ru

Давайте разберемся как это работает. Браузер читает нашу html-страницу, видит оператор для выполнения document.write("Моя первая страница."); и выполняет его. Рассмотрим из чего состоит сам оператор (инструкция):

JavaScript 3 урок обработчики событий - student2.ru

При интерпретации html-страницы браузер создает объекты javascript. Они хранятся в виде иерархической структуры, отражая структуру документа, например:

JavaScript 3 урок обработчики событий - student2.ru

На самом верхнем уровне находится объект window, представляющий окно браузера и являющийся "родителем" всех остальных объектов. Расположенные ниже могут иметь свои подчиненные объекты. Так объект document (текущая страница) может иметь дочерний объект form (форма) и т.д.

Все объекты имеют методы (отделяются от объекта точкой), например:
document.write позволяет писать текст в текущую страницу,
window.open открывает новое окно браузера.

Также объекты имеют свойства, например:
document.bgcolor содержит значение фонового цвета текущей страницы,
document.title содержит заголовок страницы.

Все инструкции программного кода заканчиваются точкой с запятой. Об этом надо помнить.

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

Для этого в тегах элементов страницы введены параметры обработки событий, задающие действия, выполняемые при возникновении события, связанного с элементом. Например:

<div onClick="addText();"></div>

Здесь Click - событие (щелчок по div-у), onClick - обработчик события, addText() - имя функции, которая сработает при возникновении этого события (щелчка по div-у).

Функции мы будем рассматривать в следующем уроке, а сейчас перечислим события, которые поддерживаются javascript. Запоминать их не следует, в дальнейшем можете просто обращаться к этой таблице.

событие когда происходит обработчик события
Blur потеря объектом фокуса onBlur
Change пользователь изменяет значение элемента onChange
Click пользователь щелкает мыщью по объекту onClick
DblClick пользователь делает двойной щелчок мышью по объекту onDblClick
DragDrop пользователь перетаскивает мышью объект onDragDrop
Error возникновение javascript-ошибки onError
Focus окно или элемент формы получает фокус onFocus
KeyDown пользователь нажимает клавишу клавиатуры onKeyDown
KeyPress пользователь удерживает нажатой клавишу клавиатуры onKeyPress
KeyUp пользователь отпускает клавишу клавиатуры onKeyUp
Load документ загружается в браузер onLoad
MouseDown пользователь нажимает кнопку мыши onMouseDown
MouseOut указатель мыши выходит за пределы элемента onMouseOut
MouseOver указатель мыши помещается над элементом onMouseOver
MouseUp пользователь отпускает кнопку мыши onMouseUp
Move пользователь перемещает окно onMove
Reset пользователь нажимает кнопку "reset" формы onReset
Resize пользователь изменяет размеры окна или элемента onResize
Select пользователь выбирает элемент формы onSelect
Submit пользователь нажимает кнопку "submit" формы onSubmit
Unload пользователь закрывает документ onUnload


Хорошим стилем программирования является оформление действий, выполняемых при обработке событий, в виде функций. Их мы и будем изучать в следующем уроке.


Наши рекомендации