Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Лекция №
Тема: «Объекты и события»
Вопросы темы:
Перехват событий Объект 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).
Чаще всего используемые свойства объекта 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-документа в окно или фрейм (обычно используется в записи тэга <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, F, 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. Как выполнить переадресацию событий?
