Как создать сайтУроки JavaScript → JavaScript обработчики событий

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

Давайте напишем нашу первую программу. Для этого сделаем исключение и поместим наш 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>
Откройте эту страницу в браузере, она выглядит так:


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



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



На самом верхнем уровне находится объект 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


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



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.