Лекция №
Тема: «Объекты и события»
Вопросы темы:
- Перехват событий
- Объект Event и его свойства
- Наиболее часто используемые свойства объекта Event
- Типовые события и основные приемы работы с ними:
- События, касающиеся окна браузера
- События, касающиеся документа в целом
- События, касающиеся форм и элементов диалога
- События мыши
- Клавиатурные события
- Переадресация событий
Объекты и события
Перехват событий
Перехватом события называется создание программистом Java-скрипта, содержащего некую функцию обработки, которая «привязана» к данному событию для конкретного объекта или для некоторой группы объектов. Для указания действий, которые должен выполнить компьютер в ответ на событие, в JavaScript возможны следующие варианты:
• отдельный скрипт, «привязанный» к заданному объекту и событию (работает только в браузерах Internet Explorer):
_<SCRIPT F0R=oбъект EVENT ="событие"> выполняемые действия </SCRIPT>
Например, если требуется выдать окно-сообщение при щелчке мышью на кнопке с именем but0, то скрипт будет выглядеть так (имена событий должны записываться только строчными буквами и с парой завершающих скобок):
<SCRIPT FOR=but0 EVENT="onclick()">: alert("Вы щелкнули на кнопке!"); </SCRIPT>
Аналогичным образом указывается объект и событие при вызове скрипта, расположенного в отдельном JavaScript-файле.
• «привязка» функции к событию, записываемая в составе тэга данного объекта:
В состав тэга, кодирующего соответствующий элемент интерфейса страницы (элемент формы, гиперссылку, а также < BODY >), включается запись вида:
<название события>="<имя функции — обработчика> (<передаваемое значение>);"
где <функция - обработчик — некоторая функция, написанная пользователем и входящая в состав скриптового листинга, а <передаваемое значение> — некоторая константа (например, имя объекта), которая может быть использована в ходе выполнения функции — обработчика (если такой необходимости нет, после имени функции записываются пустые скобки). При этом для одного и того же объекта может быть запрограммировано отслеживание нескольких различных событий, вызывающих как одну и ту же, так и разные функции. Пример (для той же кнопки):
<INPUT TYPE="button" NAME="but0" VALUE="Щелкни меня!" onClick="javascript:FunClk(); ">
<SCRIPT LANGUAGE="JavaScript"> function FunClk() {
alert("Вы щелкнули на кнопке!"); } </SCRIPT>
Примечание. В записи, реализующей вызов для указанного события назначенной ему функции-обработчика, обычно перед именем функции-обработчика записывается указание javascript с последующим за ним двоеточием, отделяющим его от имени функции. В более старых версиях браузера (в частности, Internet Explorer 3.0) это указание может не восприниматься корректным образом, тогда имя функции — обработчика нужно записывать сразу после знака равенства после названия события. Кроме того, по крайней мере, в версии JavaScript, реализованной в браузерах Internet Explorer, имена функций при их записи в «привязке» к тому или иному событию в составе тэгов могут восприниматься как ошибочные, если в них входят цифры. Поэтому при необходимости, например, объявить несколько почти одноименных функций лучше в этом случае нумеровать их не цифрами (Funl, Fun2, Fun3), а буквами, используя для наглядности символ подчеркивания (Fun_a, Fun_b, Fun_c).
• присвоение функции-обработчика события в качестве значения соответствующего «свойства» объекта:
Этот способ применяется в случае, когда требуемому объекту не соответствует никакой тэг (например, для объектов window и document) или же требуется организовать обработку одного и того же события для нескольких объектов. Здесь в составе скрипта (т. е. внутри контейнера <SCRIPT>...</SCRIPT>) записывается строка вида:
<объект или иерархическая цепочка>.<событие>=<имя функции-обработчика>
Например, для той же кнопки, если она находится в составе формы с именем MyForm:
document.MyFormbutO.onclick = FunClk;
(где функция-обработчик та же самая, что и в предыдущем примере).
Если речь идет о всем документе (срабатывание при щелчке мышью на свободном от гиперссылок и элементов интерактивного диалога участке WWW-страницы), эта строка записывается так:
document.onclick=FunClk;
а при необходимости перехватить событие для объекта, поименованного с помощью параметра ID, — document.all.ObjectName.onclick=FunClk;
(во всех случаях имя события записывается строчными буквами).
• указание объекта и события в качестве имени функции-обработчика:
По смыслу этот способ можно было бы считать альтернативой первого из рассмотренных здесь, но в отличие от него здесь предоставляется возможность записи в скрипте нескольких таких функций. Пример (перехват события «щелчок мышью» для документа в целом):
function document.onclick () {
alert ("Щелчок мышью зафиксирован!"); }
• частный случай — событие «щелчок мышью» для гиперссылки
Поскольку указанное событие является для гиперссылки стандартным (подразумеваемым по умолчанию), в отдельных случаях можно присваивать соответствующую команду или вызов скрипта непосредственно в качестве значения параметра HREF. Например, следующий тэг создает ссылку, щелчок мышью на которой помещает данную страницу в список «Избранное» (подробнее об этом см. далее). Запись «префикса» javascript: здесь обязательна.
<а href="javascript:window.external.AddFavorite (location.href,%20'Самая%20лучшая%20домашняя%20 страничка');">Поместите мою страничку в "Избранное"!</а>
Объект event и его свойства
В JavaScript для объекта window предусмотрен специальный вложенный объект event, позволяющий возвращать скриптовой программе некоторые дополнительные параметры для перехваченного события, такие как координаты курсора мыши, код нажатой клавиши и пр., а также управлять дальнейшим отслеживанием данного события в иерархической цепочке объектов. Типовая запись обращения к нему выглядит следующим образом:
<имя переменной> = window.event.<свойство> или
window.event.<свойство> = <присваиваемое значение>
(в первом случае значение считывается в переменную, во втором речь идет об изменении этого значения, что доступно лишь для некоторых свойств объекта event).