| Свойство | Назначение | Типовая запись |
| X | Координаты курсора мыши (в момент совершения события) относительно верхнего левого угла данной Web-страницы | window.event.x |
| У | window.event.у | |
| screenX | Координаты курсора мыши (в момент совершения события) относительно верхнего левого угла экрана дисплея | window.event.screenX |
| screenY | window.event.screenY | |
| altKey | Проверка, была ли нажата в момент совершения события клавиша Alt, Ctrl или Shift (правая либо левая) соответственно. Возвращает значение true (нажата) или false (не нажата) Возвращает код нажатой клавиши | window.event.altKey |
| ctrlKey | window.event.ctrlKey | |
| shiftKey keyCode | window.event.shiftKey window.event.keyCode | |
| srcElement | Возвращает один из параметров объекта, над которым произошло событие: | |
| — тэг объекта | window.event.srcElement. taqName | |
| — имя (значение параметра NAME) | window.event.srcElement. name | |
| — имя (значение параметра ID) | window.event.srcElement. id | |
| cancelBubble | Управляет распространением события по иерархической цепочке объектов (присвоение значения true запрещает такое распространение) | window.event.cancelBubble =true |
| ReturnValue | Управляет срабатыванием действий по умолчанию для данного события (присвоение значения false запрещает выполнение действий по умолчанию) | window.event.returnValue |
Типовые события и основные приемы работы с ними
События, касающиеся окна браузера
• onResize — совершается, когда пользователь меняет размеры окна браузера (если оно не развернуто во весь экран);
• onMove — совершается, когда пользователь перемещает окно браузера (если оно не развернуто во весь экран).
Перехват этих событий производится присвоением имени функции-обработчика соответствующему событию, например:
window.onresize = FunRsz; function FunRsz() {
alert("Размеры окна изменены!"); }
События, касающиеся документа в целом
• onLoad — совершается, когда полностью завершена загрузка HTML-документа в окно или фрейм (обычно используется в записи тэга <body> для вызова скриптовой функции, выполняющей какие-либо инициализирующие действия);
• onUnload — совершается, когда пользователь выходит из документа (т. е. загружает в данное окно или кадр другую страницу либо завершает работу браузера);
• onHelp — совершается, когда пользователь нажимает клавишу F1 для вызова подсказки.
Как правило, запись операторов перехвата этих событий помещается в состав тэга <BODY>. Для события onHelp предусмотрено действие по умолчанию — вызов встроенного Help браузера; для блокирования этого действия необходимо включить в состав функции-обработчика данного события строку: window.event.returnValue = false;
События, касающиеся форм и элементов диалога
• onFocus — совершается, когда данный объект (элемент формы select, text или textarea) становится текущим;
• onBlur — совершается, когда элемент формы select, text или textarea перестает быть текущим (т. е. пользователь щелкнет мышью вне его или на другом элементе формы);
• onChange — совершается, когда зафиксировано изменение значения элементов формы select, text или textarea; для двух последних необходимо не только изменить содержимое области ввода текста, но и щелкнуть мышью вне его или на другом элементе формы;
• onSelect — совершается, когда в элементе формы text или textarea пользователем выделен фрагмент содержащегося текста или весь этот текст;
• onSubmit — совершается при щелчке мышью на кнопке submit (вызванная по данному событию функция должна обязательно возвращать при помощи оператора return логическое значение true или false — в первом случае производится указанное в составе тэга <FORM> действие по отправке данных формы, во втором — это действие блокируется; данное событие удобно для организации контроля правильности заполнения формы пользователем перед отправкой введенных им данных).
Следует отметить, что это же событие может быть использовано для отслеживания нажатия клавиши Enter во время ввода текста в текстовое поле (браузер автоматически инициирует при этом отправку данных, даже если в форме отсутствует кнопка Submit). Для этого запись onSubmit="javascript: функция-обработчик ();" нужно поместить в составе тэга <FORM> той формы, в пределах которой расположено данное текстовое поле.
События мыши
• onclick — совершается при щелчке левой кнопкой мыши на объекте — кнопке (любого типа, кроме графической), флажке, радиокнопке или гиперссылке;
• onDblClick — совершается при двойном щелчке левой кнопкой мыши на объекте;
• onMouseOver — совершается, когда курсор мыши наведен на гиперссылку или иной объект;
• onMouseOut — совершается, когда курсор мыши уводится с гиперссылки или иного объекта (событие, обратное предыдущему);
• onMouseDown — совершается при нажатии левой кнопки мыши, когда ее курсор наведен на данный элемент (в отличие от «щелчка», здесь компьютер не ожидает обязательно следующего вслед за этим отпускания кнопки);
• onMouseUp — совершается при отпускании левой кнопки мыши, когда ее курсор наведен на данный объект (даже если нажата она была вне его); последние два события могут, например, использоваться для реализации действия «перетащить и отпустить», когда на одном объекте фиксируется событие onMouseDown, а на другом, «целевом», — onMouseUp);
• onMouseMove — совершается при перемещении курсора мыши в пределах данного объекта.
(В браузерах Netscape предусмотрено также событие onDragDrop, совершающееся, когда пользователь перетаскивает мышью что-либо в окно браузера).
В обработчике «мышиных» событий часто требуется определить координаты курсора мыши (например, для выяснения, в каком месте страницы пользователь щелкнул мышью, для реализации «привязанных» к курсору мыши надписей или рисунков и пр.). Следующий пример наглядно демонстрирует, как это делается:
document.onclick = FunClk;
function FunClk () { KurX = window.event.x; KurY = window.event.y; DX = window.event.screenX — window.event.x;
DY = window.event.screenY — window.event. y; alert("Координаты мыши: "+KurX+", "+KurY); alert("Смещение окна браузера: "+DX+", "+DY); }
Следует лишь заметить, что в смещение по Y, рассчитываемое указанным способом, включается также высота «шапки» WWW-страницы (т. е. суммарная высота элементов интерфейса браузера, отображаемых над страницей, — строки заголовка окна, меню, панели инструментов и строки адреса).
Клавиатурные события
• onKeyPress — совершается при нажатии на клавиатуре какой-либо символьной клавиши;
• onKeyDown — совершается при нажатии на клавиатуре любой из клавиш (в том числе управляющей);
• onKeyUp — совершается при отпускании клавиши. Типичный способ перехвата этих событий — запись строки «объект.событие» в качестве имени функции-обработчика. Сама же эта функция обычно включает в себя строку определения кода нажатой клавиши и, в некоторых случаях, также запрет на выполнение действий, присвоенных той или иной клавише по умолчанию (аналогично описанному выше для события onHelp). Приведем пример для события onKeyPress (для двух других событий запись аналогична; в записи имени функции всегда используются только строчные буквы):
function document.onkeypress() { KeyCode = window.event.keyCode;
// обработка нажатия той или иной клавиши }
Заметим, что значение свойства keyCode объекта event существенно различно для на первый взгляд одинаковых по смыслу событий onKeyPress и onKeyDown (а также onKeyUp).
Для первого из них это свойство возвращает код символа, соответствующего нажатой клавише в зависимости от установленных режимов ввода (строчный/заглавный, русский/латинский и пр.), причем для «английской» части знаковой таблицы (символы с кодами меньше 127) возвращаются их коды ASCII, а для «русской» — четырехзначные коды, соответствующие алфавитному порядку букв (не учитывая разрыв между «п» и «р» в знаковой таблице): «А» — код 1040, «Б» — код 1041, «В» — 1042,..., «Я» — 1071, «а» — 1072, «б» — 1073,..., «п» — 1087, «р» — 1088,..., «я» — 1103.
Что же касается событий onKeyDown и onKeyUp, то для них возвращается уже что-то вроде «скэн-кода», хотя возвращаемые значения и не соответствуют ни типовым скэн-кодам, ни расширенным кодам, обычно указываемым в справочных изданиях (и эти коды не зависят от текущих режимов ввода, кроме режима работы цифровых клавиш в правой части клавиатуры, переключаемого клавишей NumLock). Опытным путем выяснено, что:
• для цифр и клавиш, вводящих латинские буквы, возвращается ASCII-код соответствующей цифры или заглавной латинской буквы;
• для прочих символьных клавиш возвращаются коды: «точка с запятой» — 186, «плюс» — 187, «запятая» — 188, «минус» — 189, «точка» — 190, «/» — 191, «-» — 192, «[» — 219, «\» — 220, «]» — 221, «кавычки и апостроф» — 222;
• для функциональных клавиш F1-F12 возвращаются коды: F1 — 112, F2 — 113, F3 - 114, F4 — 115, F5 — 116, F6 — 117, F7 — 118, F8 — 119, F9 — 120, F10 — 121, F11 — 122, F12 — 255;
• для клавиш управления курсором и перемещением по тексту (как расположенных отдельно, так и на правой цифровой клавиатуре при отключенном режиме Num-Lock) возвращаются коды: «курсор влево» — 37, «курсор вверх» — 38, «курсор вправо» — 39, «курсор вниз» — 40, Ins — 45, Delete — 46, End — 35, Home — 36, PgUp — 33, PgDn — 34;
• для клавиш цифровой клавиатуры возвращаются коды: «5» — 12, «серый /» — 111, «серый » — 106, «серый минус» — 109, «серый плюс» — 107;
• для редактирующих и управляющих клавиш возвращаются коды: Shift (правый и левый) — 16, Ctrl (правый и левый) — 17, Alt (левый) — 18 (правый — 17), Caps-Lock — 20, Tab — 9, «забой» — 8, Enter — 13, Num- i Lock — 144, ScrollLock — 145, Pause — 19, Esc — 27;
• для специальных «Win95»-клавиш возвращаются коды: «вызов меню Пуск» — 91 (левая) и 92 (правая), «вызов контекстного меню» — 93.
Вообще же рекомендуется проверить код обрабатываемой клавиши для данного браузера и, возможно, для данного типа клавиатуры экспериментально при помощи простейшей скриптовой программы:
<SCRIPT LANGUAGE="JavaScript> function document.onkeydown() {
alert("Код нажатой клавиши = "+
window.event.keyCode); }
Переадресация событий
Если необходимо обработать некоторое событие, обычно не являющееся характерным для интересующего нас объекта, в JavaScript может быть использован специальный обработчик captureEvent (не путайте его со свойством event!), позволяющий перехватить указанное событие заданным объектом. Например, событие onclick обычно не обрабатывается для объекта window, но если включить в состав скрипта строку:
window.captureEvents(Event.CLICK); то далее можно как ни в чем не бывало записать:
window.onclick = <имя функции — обработчика>
(здесь имена событий, указываемые в качестве аргумента captureEvents, всегда записываются прописными буквами и без «префикса» on; если требуется перехватывать два и более разных событий, они разделяются вертикальной чертой, например window. captureEvents (Event.Сlick | Event. KEYPRESS)).
При этом производится перехват указанного события «щелчок мыши» во всем окне браузера. Далее из скриптовой программы — обработчика события можно управлять дальнейшим «поведением» этого события относительно содержащихся в окне объектов — выяснять, предусмотрены ли для данного события другие обработчики, «привязанные» к объекту более низкой иерархии (например, при щелчке на кнопке в нашем случае событие сразу будет перехвачено объектом window, а мы можем выяснить, не предусматривался ли для этой кнопки свой обработчик); переадресовывать событие указанному объекту (как бы «эмулируя» для него данное событие) и пр.
Вопросы для повторения:
1. Что называется перехватом события?
2. Перечислите возможные варианты, для указания действий, которые должен выполнить компьютер в ответ на событие.
3. Для каких целей предусмотрен объект EVENT и как определить свойства этого объекта?
4. Назовите основные типовые события, касающиеся окна браузера.
5. Назовите основные типовые события, касающиеся документа в целом
6. Назовите основные типовые события, касающиеся форм и элементов диалога
7. Назовите основные типовые события мыши
8. Назовите основные клавиатурные события.
9. Как выполнить переадресацию событий?