Лекция № Тема: «Объекты и события»

Вид материала

Лекция

Содержание BODY>), включается запись вида: =" ();" MyForm: document .MyFormbutO .onclick = FunClk ID, — document.all.ObjectName.onclick=FunClk Типовая запись Типовые события и основные приемы работы с ними DY = window.event.screenY — window.event. y; alert("Координаты мыши: "+KurX+", "+KurY); alert("Смещение окна браузера: "+DX+", "

Подобный материал:

• Лекция объекты гражданских прав. Объекты гражданских прав, 167.17kb.
• Лекция Использование языка " onclick="return false">, 163.14kb.
• Семинару по дисциплине "Гражданское право". Тема «Объекты гражданских прав», 9.73kb.
• Истец, 70.18kb.
• 1 11 Тема 2 12 тема 3 13 Тема 4 14 Тема 5 15 Тема 6 17 Тема 7 20 Тема 8 22 Тема, 284.17kb.
• Лекция Правовые Основы оценки недвижимости, 1204.27kb.
• Лекция Проектирование реляционных, 227.77kb.
• Лекция №8. Система передачи и обработки информации, 210.99kb.
• Лекция Астрология и нумерологическая символика принципов Лекция Знаки Зодиака, 517.96kb.
• Лекция Тема: Экономическая оценка природных ресурсов и объектов окружающей среды, 335.65kb.

Лекция №

Тема: «Объекты и события»

Вопросы темы:

1. Перехват событий
   
2. Объект Event и его свойства
   
3. Наиболее часто используемые свойства объекта Event
   
4. Типовые события и основные приемы работы с ними:
   
   1. События, касающиеся окна браузера
      
   2. События, касающиеся документа в целом
      
   3. События, касающиеся форм и элементов диалога
      
   4. События мыши
      
   5. Клавиатурные события
      
5. Переадресация событий
   

Объекты и события


Перехват событий

Перехватом события называется создание программистом Java-скрипта, содержащего некую функцию обработки, которая «привязана» к данному событию для конкретного объекта или для некоторой группы объектов. Для указания действий, которые должен выполнить компьютер в ответ на событие, в " onclick="return false">
• отдельный скрипт, «привязанный» к заданному объекту и событию (работает только в браузерах Internet Explorer):

_

Например, если требуется выдать окно-сообщение при щелчке мышью на кнопке с именем but0, то скрипт будет выглядеть так (имена событий должны записываться только строчными буквами и с парой завершающих скобок):



Аналогичным образом указывается объект и событие при вызове скрипта, расположенного в отдельном " onclick="return false">
• «привязка» функции к событию, записываемая в соста­ве тэга данного объекта:

В состав тэга, кодирующего соответствующий элемент интерфейса страницы (элемент формы, гиперссылку, а также < BODY>), включается запись вида:

<название события>="<имя функции — обработчика> (<передаваемое значение>);"

где <функция - обработчик — некоторая функция, написанная пользователем и входящая в состав скриптового листинга, а <передаваемое значение> — некоторая константа (например, имя объекта), которая может быть использована в ходе выполнения функции — обработчика (если такой необходимости нет, после имени функции записываются пустые скобки). При этом для одного и того же объекта может быть запрограммировано отслеживание нескольких различных событий, вызывающих как одну и ту же, так и разные функции. Пример (для той же кнопки):





Примечание. В записи, реализующей вызов для указанного события назначенной ему функции-обработчика, обычно перед именем функции-обработчика записывается указание " onclick="return false"> с последующим за ним двоеточием, отделяющим его от имени функции. В более старых версиях браузера (в частности, Internet Explorer 3.0) это указание может не восприниматься корректным образом, тогда имя функции — обработчика нужно записывать сразу после знака равенства после названия события. Кроме того, по крайней мере, в версии " onclick="return false">
• присвоение функции-обработчика события в качестве значения соответствующего «свойства» объекта:

Этот способ применяется в случае, когда требуемому объекту не соответствует никакой тэг (например, для объектов window и document) или же требуется организовать обработку одного и того же события для нескольких объектов. Здесь в составе скрипта (т. е. внутри контейнера ) записывается строка вида:

<объект или иерархическая цепочка>.<событие>=<имя функции-обработчика>

Например, для той же кнопки, если она находится в составе формы с именем MyForm:

document .MyFormbutO .onclick = FunClk;

(где функция-обработчик та же самая, что и в предыдущем примере).

Если речь идет о всем документе (срабатывание при щелчке мышью на свободном от гиперссылок и элементов интерактивного диалога участке WWW-страницы), эта строка записывается так:

document.onclick=FunClk;

а при необходимости перехватить событие для объекта, поименованного с помощью параметра ID, — document.all.ObjectName.onclick=FunClk;

(во всех случаях имя события записывается строчными буквами).


• указание объекта и события в качестве имени функции-обработчика:

По смыслу этот способ можно было бы считать альтернативой первого из рассмотренных здесь, но в отличие от него здесь предоставляется возможность записи в скрипте нескольких таких функций. Пример (перехват события «щелчок мышью» для документа в целом):

function document.onclick () {

alert ("Щелчок мышью зафиксирован!"); }


• частный случай — событие «щелчок мышью» для гиперссылки

Поскольку указанное событие является для гиперссылки стандартным (подразумеваемым по умолчанию), в отдельных случаях можно присваивать соответствующую команду или вызов скрипта непосредственно в качестве значения параметра HREF. Например, следующий тэг создает ссылку, щелчок мышью на которой помещает данную страницу в список «Избранное» (подробнее об этом см. далее). Запись «префикса» " onclick="return false">
<а href="" onclick="return false">Поместите мою страничку в "Избранное"!


Объект event и его свойства

В " onclick="return false">window предусмотрен специальный вложенный объект event, позволяющий возвращать скриптовой программе некоторые дополнительные параметры для перехваченного события, такие как координаты курсора мыши, код нажатой клавиши и пр., а также управлять дальнейшим отслеживанием данного события в иерархической цепочке объектов. Типовая запись обращения к нему выглядит следующим образом:

<имя переменной> = window.event.<свойство> или

window.event.<свойство> = <присваиваемое значение>

(в первом случае значение считывается в переменную, во втором речь идет об изменении этого значения, что доступно лишь для некоторых свойств объекта event).


Чаще всего используемые свойства объекта event

Свойство	Назначение	Типовая запись
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-документа в окно или фрейм (обычно ис­пользуется в записи тэга для вызова скриптовой функции, выполняющей какие-либо инициализирую­щие действия);

• onUnload — совершается, когда пользователь выходит из документа (т. е. загружает в данное окно или кадр другую страницу либо завершает работу браузера);

• onHelp — совершается, когда пользователь нажимает кла­вишу F1 для вызова подсказки.

Как правило, запись операторов перехвата этих событий помещается в состав тэга . Для события 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 — в пер­вом случае производится указанное в составе тэга

действие по отправке данных формы, во втором — это действие блокируется; данное событие удобно для организации контроля правильности заполнения формы поль­зователем перед отправкой введенных им данных).

Следует отметить, что это же событие может быть использовано для отслеживания нажатия клавиши Enter во время ввода текста в текстовое поле (браузер автоматически инициирует при этом отправку данных, даже если в форме отсутствует кнопка Submit). Для этого запись onSubmit="" onclick="return false"> той формы, в пределах которой расположено данное текстовое поле.


События мыши


• 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.

Вообще же рекомендуется проверить код обрабатываемой клавиши для данного браузера и, возможно, для данного типа клавиатуры экспериментально при помощи простейшей скриптовой программы: