События для объекта windows
На этом шаге продробно рассмотрим свойства, методы и события объекта Window .
Объект Window представляет собой окно браузера и является начальным (корневым) объектом модели Microsoft Internet Explorer . Напомним, что свойства позволяют управлять «внешним видом» объекта; методы – это те действия, которые может выполнять объект; события – подпрограммы, которые выполняются «в ответ» на возникновение какой-либо особой ситуации (загрузка документа, щелчок мыши и т.п.). Таким образом, чтобы обработать какое-либо событие (выполнить в ответ на его возникновение определенную последовательность действий), достаточно разместить в HTML -документе соответствующую подпрограмму. Обращение к ней браузер осуществит автоматически. Если обработчик какого-либо события отсутствует в HTML -документе, то никаких действий выполняться не будет. В этом случае говорят, что «событие не обработано».
Перечислим основные свойства, методы и события объекта Window .
Приведем несколько примеров, иллюстрирующих использование перечисленных свойств, методов и событий. Задание 1. Составить HTML -документ, демонстрирующий использование метода Confirm объекта Window , который определяет, какая кнопка была нажата: OK или Отмена .
Решение и комментарии вы можете посмотреть здесь. Задание 2. Составить HTML -документ, демонстрирующий использование метода Prompt объекта Window . Этот метод выводит на экран окно со строкой редактирования, куда можно ввести требуемую последовательность символов. Эта последовательность помещается в заданную переменную (в нашем случае это переменная X ).
Решение и комментарии вы можете посмотреть здесь. Задание 3. Составить HTML -документ, демонстрирующий использование события OnLoad объекта Window . Это событие происходит после загрузки документа в окно браузера.
Решение и комментарии вы можете посмотреть здесь. Задание 4. Создайте HTML -документ, иллюстрирующий использование событий, возникающих при получении и потере фокуса приложением.
Решение и комментарии вы можете посмотреть здесь.
Замечание.
- Обратите внимание на имена подпрограмм. Они складываются из имени объекта (Window) и имени события.
- В отличие от предыдущих примеров в тексте HTML -документа находятся только обработчики событий! Их вызов осуществляется автоматически при наступлении соответствующего события.
Задание 5. Создайте HTML -документ, иллюстрирующий использование метода Open .
Решение и комментарии вы можете посмотреть здесь. Задание 6. Проиллюстрируем использование методов SetTimeOut и ClearTimeOut . Метод SetTimeOut задает процедуру и временной интервал, по прошествии которого эта процедура должна выполниться. В приведенном примере по прошествии пяти секунд выполнится метод Alert , который выведет на экран сообщение: Нажмите кнопку! Если до этого времени пользователь успевает нажать кнопку, то отсчет времени прекращается с помощью метода ClearTimeOut .
Решение и комментарии вы можете посмотреть здесь. Задание 7. Иллюстрация обработки события OnUnLoad, которое возникает при закрытии окна приложения. Напомним, что для закрытия окна можно использовать метод Close . Прокомментируем использование указанных методов. После нажатия кнопки пользователем управление передается процедуре с именем Button1_OnClick , которая содержит метод закрытия окна (метод Close ). При его выполнении управление передается процедуре Window_OnUnLoad , являющейся обработчиком события закрытия окна. Процедура Window_OnUnLoad выведет на экран сообщение До свидания!
Решение и комментарии вы можете посмотреть здесь. Задание 8. Создайте HTML -документ, иллюстрирующий использование области видимости переменных.
Решение и комментарии вы можете посмотреть здесь.
На следующем шаге перейдем к рассмотрению объекта Location .
События объекта window
Клиентские сценарии. Модель событий. События окна.
Keyup
Генерируется при отпускании клавиши. Виртуальный код клавиши заносится в keyCode, charCode обнуляется. Это событие применимо к большинству элементов.
· bubbles: true;
· cancelable: true;
· контекст: altKey, ctrlKey, shiftKey, metaKey, keyIdentifier, keyLocation.
DOM 2 не содержит детальной спецификации интерфейсов, связанных с отображением документов, такие спецификации появятся в DOM 3. Он определяет интерфейс AbstractView, предназначенный для установления связи между документом и его отображением, но не описывает его свойств и поведения.
Интерфейс AbstractView является базовым для всех отображений документа (окон, фреймов и т. п.). Он имеет единственное свойство document, возвращающее указатель на объект Document, соответствующий отображаемому документу. Интерфейс Document, в свою очередь, может иметь свойство defaultView типа AbstractView, указывающее на окно отображения документа.
Для практической реализации обозревателей такой спецификации явно недостаточно, поэтому разработчики пока пользуются собственными (нестандартными) спецификациями интерфейса для окон обозревателя. Соответствующий объект традиционно называется window.
Объект window соответствует окну обозревателя. Он позволяет получить доступ к документу, загруженному в данное окно, к событиям, которые происходят в окне, и к различным свойствам обозревателя. Этот объект является глобальным объектом клиентской среды JavaScript, поэтому для доступа к его свойствам и методам префикс window. не нужен. Однако, для читаемости кода он может использоваться; он всегда указывает на текущее окно.
| Событие | Описание | Поддержка |
| onabort | Генерируется при прерывании загрузки страницы. | Gecko |
| onactivate | Генерируется, когда окно становится активным. | IE |
| onafterprint | Генерируется сразу после печати документа, содержащегося в окне. | IE |
| onbeforedeactivate | Генерируется перед тем, как окно перестанет быть активным. | IE |
| onbeforeprint | Генерируется перед печатью документа, содержащегося в окне. | IE |
| onbeforeunload | Генерируется перед выгрузкой документа. | IE |
| onblur | Генерируется, когда окно теряет фокус. | Gecko, IE |
| onchange | Генерируется при изменении значения элемента формы в окне. | Gecko |
| onclick | Генерируется при щелчке кнопкой мыши. | Gecko |
| onclose | Генерируется при закрытии окна. | Gecko |
| oncontrolselect | Генерируется перед тем, как в окне будет выбран элемент, допускающий изменение размеров. | IE |
| ondeactivate | Генерируется, когда окно перестает быть активным. | IE |
| ondragdrop | Генерируется при перетаскивании внешнего объекта в окно. | Gecko |
| onerror | Генерируется при возникновении ошибки в процессе загрузки документа. | Gecko, IE |
| onhelp | Генерируется при нажатии пользователем клавиши F1 в активном окне обозревателя. | IE |
| onfocus | Генерируется, когда окно получает фокус. | Gecko, IE |
| onkeydown | Генерируется при нажатии клавиши. | Gecko |
| onkeypress | Генерируется при удержании нажатой клавиши. | Gecko |
| onkeyup | Генерируется при отпускании клавиши. | Gecko |
| onload | Генерируется сразу после загрузки документа. | Gecko, IE |
| onmousedown | Генерируется при нажатии кнопки мыши. | Gecko |
| onmousemove | Генерируется при движении курсора мыши по элементу в окне. | Gecko |
| onmouseout | Генерируется при покидании курсором мыши элемента в окне. | Gecko |
| onmouseover | Генерируется при попадании курсора мыши на элемент в окне. | Gecko |
| onmouseup | Генерируется при отпускании кнопки мыши. | Gecko |
| onpaint | Генерируется при отображении содержимого окна. | Gecko |
| onreset | Генерируется при инициализации формы в окне. | Gecko |
| onresize | Генерируется перед изменением размеров окна. | Gecko, IE |
| onresizeend | Генерируется при завершении изменения размеров объекта. | IE |
| onresizestart | Генерируется при начале изменения размеров объекта.. | IE |
| onscroll | Генерируется при прокрутке содержимого окна. | Gecko, IE |
| onselect | Генерируется, когда пользователь выделяет текст в текстовом поле. | Gecko |
| onsubmit | Генерируется при пересылке формы в окне. | Gecko |
| onunload | Генерируется перед завершением выгрузки документа. | Gecko, IE |
Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет
События объекта window
Остановимся вкратце на событиях, связанных с объектом window. Обработчики этих событий обычно помещают как атрибут контейнера .
10.4.1 Load — событие происходит в момент, когда загрузка документа в данном окне полностью закончилась. Если текущим окном является фрейм, то событие Load его объекта window происходит, когда в данном фрейме загрузка документа закончилась, независимо от состояния загрузки документов в других фреймах. Использовать обработчик данного события можно, например, следующим образом:
10.4.2 Unload — событие происходит в момент выгрузки страницы из окна. Например, когда пользователь закрывает окно, либо переходит с данной Web-страницы на другую, кликнув ссылку или набрав адрес в адресной строке, либо при изменении адреса страницы (свойства window.location) скриптом. Например, при уходе пользователя с нашей страницы мы можем позаботиться о его удобстве и закрыть открытое ранее нашим скриптом окно:
10.4.3 Error — событие происходит при возникновении ошибки в процессе загрузки страницы. Если это событие произошло, можно, например, вывести сообщение пользователю с помощью alert() или попытаться перезагрузить страницу с помощью window.location.reload(). В следующем примере мы назначаем обработчиком события Error функцию ff(), которая будет выдавать сообщение. В тексте программы мы допустили ошибку: слово Alert написано с заглавной буквы (помните, что в JavaScript это недопустимо?). Поэтому при открытии этого примера возникнет ошибка и пользователь получит об этом «дружественное» сообщение.
10.4.4 Focus — событие происходит в момент, когда окну передается фокус. Например, когда пользователь «раскрывает» свернутое ранее окно, либо (в Windows) выбирает это окно браузера с помощью Alt+Tab среди окон других приложений. Это событие происходит также при программной передаче фокуса данному окну путем вызова метода window.focus(). Пример использования:
10.4.5 Blur — событие, противоположное предыдущему, происходит в момент, когда данное окно теряет фокус. Это может произойти в результате действий пользователя либо программными средствами — вызовом метода window.blur().
10.4.6 Resize — событие происходит при изменении размеров окна пользователем либо сценарием.
Объект document
10.5.1 Объект document является важнейшим свойством объекта window (полностью к нему нужно обращаться как window.document). Все элементы HTML-разметки, присутствующие на web-странице, — текст, абзацы, гиперссылки, картинки, списки, таблицы, формы и т.д. — являются свойствами объекта document. Можно сказать, что технология DHTML (Dynamic HTML), т.е. динамическое изменение содержимого web-страницы, заключается именно в работе со свойствами, методами и событиями объекта document.
Таблица 10.3 — Свойства, методы и события объекта document
| Свойства | Методы | События |
| URL domain title lastModified referrer cookie linkColor alinkColor vlinkColor | open() close() write() writeln() getSelection() getElementById() getElementsByName() getElementsByTagName() | Load Unload Click DblClick MouseDown MouseUp KeyDown KeyUp KeyPress |
10.5.2 Методы объекта document: перечислим основные методы.
document.getElementById — возвращает один элемент на основе его ID. Пример: document.getElementById(‘id5’) выдаст тот HTML-элемент, у которого был задан атрибут ;
document.getElementsByName — возвращает массив элементов, определенных по имени. В отличие от ID многие элементы могут иметь на странице одинаковые имена, например document.getElementsByName(‘important’);
document.getElementsByTagName — возвращает массив элементов, определенных по имени тега, например document.getElementsByTagName(‘P’). Имя тега является просто именем тега HTML, т.е. ‘DIV’, ‘IMG’, ‘TABLE’, ‘A ‘и т.д.
document.write() — он пишет в текущий HTML-документ. Его модификация document.writeln() делает то же самое, но дополнительно добавляет в конце символ новой строки; это удобно, если потом требуется читать сгенерированный HTML-документ глазами. Если запись идет в HTML-документ нового окна, открытого с помощью window.open(), то перед записью в него нужно открыть поток на запись с помощью метода document.open(), а по окончании записи закрыть поток методом document.close(). После выполнения последнего действия произойдет событие Load (и вызовется соответствующий обработчик события onLoad) у документа, а затем у окна.
10.5.3 События объекта document. События onLoad, onUnload объекта document соответствуют тем же событиям объекта window.
Перечислим события от «мыши».
События от мыши «click» происходит при однократном щелчке мышью на элементе HTML – документа. Особенно часто данное событие применяется к элементам электронных форм — LABEL, INPUT, SELECT, TEXTAREA и BUTTON, а так же элементу ссылок.
Следующие два события служат для разделения операции щелчка кнопки на два этапа – нажатие и отпускание кнопки. Событие при нажатии – «mousedown», а при отпускании – «mouseup»
События «mouseOut» происходит при перемещении курсора мыши за пределы элемента.
События от фокуса объекта. Событие «focus» происходит, когда поле получает фокус ввода с клавиатуры, соблюдая последовательность переходов, или щелчком мыши.
Событие «change» происходит, когда поля формы select, text или textarea теряют фокус и их значения изменяются, с момента попадания на него фокуса. Обработчик событий onChange выполняет программу JavaScript, назначение которой, как правило, проверка введенных пользователем данных и подтверждение ввода.
При потере фокуса ввода элементом происходит событие «blur». Оно происходит, не зависимо было, изменено значение поля пользователем, или нет.
10.5.4 Свойства объекта document. Свойства linkColor, alinkColor и vlinkColor задают цвет гиперссылок — непосещенных, активных и посещенных, соответственно.
Свойство domain выдает домен (оно аналогично window.location.hostname).
Свойство title выдает заголовок страницы (указанный в контейнере ). Свойство referrer выдает адрес страницы, с которой пользователь пришел на данную web-страницу, кликнув по гиперссылке.
Дата добавления: 2017-02-20 ; просмотров: 412 ; ЗАКАЗАТЬ НАПИСАНИЕ РАБОТЫ
