До этого мы писали наши скрипты только в теле документа, и они выполнялись в момент интерпретации тела документа, но это не единственный способ использования скриптов. Основное их назначение, это изменение вида документа в ответ на действия пользователя.
В JavaScript для этого применяется событийная модель.
Все активные элементы документа и сам документ имеют свои события, которым можно назначить функции реагирующие на эти события. Для того, чтобы функции были известны до появления какого либо события, тег SCRIPT лучше поместить в заголовок документа. Обычно этот тег состоит из одних функций. Вне функций объявляются только глобальные переменные, а так же производятся действия по инициализации программы.
Перечислим события документа (Тега <BODY>)
Событие
Когда возникает
onClick
Событие click происходит при щелчке мышью на объекте
onDblClick
Событие происходит при двойном щелчке мышью на объекте
onKeyDown
При нажатии кнопки на клавиатуре
onKeyUp
При отпускании кнопки на клавиатуре
onKeyPress
При щелчке кнопки на клавиатуре
onMouseDown
При нажатии кнопки мыши
onMouseUp
При отпускании кнопки мыши
Назначение функции реакции на событие
Большинство объектов JavaScript создается соответствующими тегами исходного кода HTML страницы. В этом коде и задаются имена функций JavaScript, которые будут вызываться броузером при возникновении соответствующего события для определенного компонента документа.
События назначаются конкретным элементам документа, т.е. тегам, которые эти элементы создают. Для этого в соответствующие теги добавляются свойства, которые должны принимать в качестве значений строки, являющиеся командами вызова функций. Строки могут быть заключены в кавычки или нет. Но если строка вызова заключена в кавычки и должна содержать внутри строки, как параметры функций, то эти строки заключаются в другие кавычки.
При щелчке мыши на документе. будет вызываться функция ShowPos, которой передается строка "Параметры".
Третий способ вызова функций. применим к активным элементам управления и записывается вместо свойств, которые обычно содержат адрес, который используется для действий. Например в параметре HREF гиперссылки или ACTION формы. Как это делается видно в примере
<A HREF="javascript:SafeGoto(1)"> Нажми сюда </A>
Вместо перехода на другую страницу будет вызвана функция, которая и будет решать что делать дальше..
<A HREF="javascript:void(0)" OnClick="AnyFunction()"> Это интересно
</A>
В данном случае в качестве адреса указан пустой объект, а все действия производятся в обработчике события OnClick().
Получение дополнительных сведений о событии
Когда функция, обрабатывающая событие получает управление, иногда требуется знать некоторые дополнительные сведения о событии, а не только факт его возникновения.
Например, если нажата кнопка мыши, то чаще всего требуется знать координаты курсора мыши и какая клавиша была нажата. Эти сведения требуется для определения, что именно требуется выполнить. Допустим, надо знать на какой части документа нажата клавиша.
Для этого существует специальный объект event, который создается в момент возникновения события и передается в функцию обработчик. В свойствах этого объекта находятся уточняющие сведения об объекте. Сами мы не можем создать экземпляр этого объекта.
Свойства объекта event
Свойство
Содержание
target
Строка, содержащая имя объекта, которому послано сообщение. Возвращает сам тег, на изображении которого произведен щелчок.
Не работает в Internet Expolorer.
type
Строка, содержащая тип события.
screenX,
screenY
Позиция мыши при щелчке в координатах экрана.
documentX, documentY
Позиция мыши при щелчке в координатах документа.
Только Netscape.
offsetX,
offsetY
Позиция мыши при щелчке в координатах документа.
Только Internet Explorer.
which
Содержит номер нажатой кнопки для событий от мыши 1 – левая кнопка;
2– средняя;
3 – правая;
Для событий от клавиатуры, содержит ASCII код нажатой клавиши. (Документировано для Netscape).
keyCode
Содержит ASCII или SCAN код нажатой клавиши клавиатуры (Для Intenet Explorer)
button
Содержит номер нажатой клавиши мыши
(Для Intenet Explorer)
modifiers
Содержит битовое поле управляющих клавиш, для определения какие клавиши были задействованы используются следующие маски: ALT_MASK, CONTROL_MASK, SHIFT_MASK.
Только в Netscape.
altKey
Болево свойство, позволяет определить нажата ли клавиша Alt.
Только в Internet Explorer.
ctrlKey
Болево свойство, позволяет определить нажата ли клавиша Ctrl.
Только в Internet Explorer.
shiftKey
Болево свойство, позволяет определить нажата ли клавиша Shift.
Только в Internet Explorer.