 |
Коллекции объекта document
|
|
|
|
В этом разделе мы приведем основные методы и события некоторых коллекций (наборов) объектов (таблица 7), которые мы упоминали в таблице 5.
Таблица 7 – Основные свойства, методы и события некоторых коллекций
| Название | Описание | |
| Коллекция links (Массив гиперссылок) | ||
| Свойства | ||
| length | Число гиперссылок в массиве | |
| target | Имя конечного окна или фрейма для гиперссылки | |
| Cобытия | ||
| onmouseover() | Возникает при размещении указателя мыши на гиперссылке | |
| onmousemove() | Возникает при перемещении мыши по гиперссылке. Координаты курсора мыши можно получить следующим образом: X = window.event.offsetX; Y = window.event.offsetY | |
| onclick() | Возникает при щелчке на гиперссылке. | |
| Коллекция anchors (Массив закладок) | ||
| Свойства | ||
| length | Число элементов в массиве | |
| name | Имя закладки | |
| Коллекция forms (Массив форм) | ||
| Свойство | ||
| elements | Ссылка на массив элементов формы | |
| Метод | ||
| submit() | Позволяет отправить данные из формы на сервер | |
| Событие | ||
| onsubmit() | Возникает перед выполнением метода submit() и используется для организации контроля пересылаемых данных | |
| Коллекция elements (Массив элементов формы) | ||
| Свойства | ||
| length | Число элементов в массиве | |
| form | Ссылка на родительскую форму для доступа к ее свойствам, например: top.document.Form1.Button1.form.method=”GET” | |
| name | Имя элемента | |
| value | Значение элемента | |
| Метод | ||
| click() | Программно имитирует щелчок на компоненте без генерации события onclick() | |
Обработка событий
Любое событие имеет свой жизненный цикл: от момента возникновения действия или условия, являющегося причиной генерирования события, до выполнения последнего оператора обработчика события или финальных действий браузера. Цикл жизни любого типичного события включает следующие этапы.
|
|
|
1 Происходит действие пользователя или возникает условие, которое возбуждает событие.
2 Тотчас же корректируется объект event, чтобы отразить параметры возникшего события.
3 Событие генерируется – это и есть истинное сообщение о возникшем событии.
4 Вызывается обработчик событий элемента-источника события, который выполняет определенные программистом действия и завершает свою работу.
5 Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта-источника события. Это «всплытие» вверх по иерархии объектов продолжается, пока не будет достигнут самый верхний объект иерархии – объект window, или обработчик события какого-либо объекта не аннулирует событие.
6 Выполняются заключительные действия по умолчанию, если таковые определены, но при условии, что событие не было аннулировано.
Если для элемента-источника события не определен обработчик, событий, то в иерархии объектов определяется его родитель, и обработчик событий родителя выполняет соответствующие действия по обработке события. И так происходит до корневого объекта иерархии.
Какие удобства предоставляет подобная технология обработки событии? Прежде всего, нет необходимости для каждого элемента писать процедуру обработки события и присоединять ее к нему. Достаточно написать одну процедуру для элемента-родителя, и она будет обрабатывать события, возбуждаемые всеми порожденными родителем элементами. Это позволяет централизованно обрабатывать наиболее часто возникающие события, и, как результат, требует меньше усилий и времени для написания и поддержки кода процедур обработки событий.
Перечислим основные свойства объекта event (таблица 8).
Таблица 8 – Основные свойства объекта event
| Свойство | Описание |
| altKey | Возвращает состояние клавиши Alt, когда происходит событие |
| button | Кнопка мыши, вызывающая событие |
| cancelBubble | Устанавливается для запрета прохождения заданного события вверх по объектной иерархии |
| clientX | Возвращает координату х элемента, исключая обрамление, отступы, полосы прокрутки и т.д |
| clientY | Возвращает координату у элемента, исключая обрамление, отступы, полосы прокрутки и т.д |
| ctrlKey | Состояние клавиши Ctrl при появлении события |
| fromElement | Возвращает элемент, с которого ушел курсор мыши (для событий onmouseover() и onmouseout()) |
| keyCode | Код ASCII нажатой клавиши. Есть возможность изменять значение, передаваемое объекту |
| offsetX | Возвращает координату х курсора мыши в пикселях относительно содержащего его элемента при возникновении события |
|
|
|
Продолжение таблицы 8
| offsetY | Возвращает координату у курсора мыши в пикселях относительно содержащего его элемента при возникновении события |
| reason | Указывает, что перемещение данных прошло успешно или из-за чего оно прекратилось |
| returnValue | Определяет возвращаемое значение для события |
| screenX | Возвращает горизонтальную координату курсора мыши относительно экрана, когда происходит событие |
| screenY | Возвращает вертикальную координату курсора мыши относительно экрана, когда происходит событие |
| shiftKey | Определяет состояние клавиши Shift при возникновении события |
| srcElement | Возвращает элемент, с которого началось прохождение события |
| srcFilter | Возвращает фильтр, создавший событие onfilterchange() |
| toElement | Возвращает элемент, на который наезжает курсор мыши (для событий onmouseover() или onmouseout()) |
| type | Возвращает название события как строку, без приставки on |
| х | Возвращает координату х курсора мыши относительно либо к позиционированному родительскому элементу, либо к окну |
| y | Возвращает координату у курсора мыши относительно либо к позиционированному родительскому элементу, либо к окну |
Свойства объекта event устанавливаются в момент прохождения события и большинство из них доступны только для чтения (их нельзя изменить).
Рассмотрим некоторые свойства объекта event.
Этот объект создается автоматически всякий раз, когда возникает какое-либо событие, и он не зависит от используемого языка создания сценария. Его использование в процедурах обработки событий для получения информации о сгенерированном событии является предпочтительным способом получения достоверной информации о событии.
|
|
|
Каждое событие характеризуется параметрами, которые передаются в сценарий через свойства объекта event. Существуют параметры, общие для всех типов событий (например, координаты курсора мыши в окне браузера) и специфические для определенного события (например, код нажатой клавиши для событий клавиатуры). При описании свойства, если не оговорено противное, подразумевается, что оно является общим для всех типов событий.
Свойство srcElement определяет элемент документа, явившийся источником события. Оно может быть полезным при централизованной обработке событий элементом, расположенным выше в иерархии объектов документа истинного «виновника» события, и, в зависимости от типа элемента, программа-обработчик может предпринять соответствующие действия.
Важное свойство cancelBubble, аннулирующее событие и прекращающее передачу его на обработку вверх по иерархии объектов.
Свойство returnValue является булевым и возвращает значение true или false после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии значение этого свойства можно использовать для альтернативной обработки события. Кроме того, если в обработчике события элемента, для которого определены действия по умолчанию, это свойство устанавливается равным false, то это отменяет выполнение действий по умолчанию. Одним из таких элементов является тэг <А>, действием по умолчанию которого является переход по ссылке, задаваемой параметром HREF.
По значениям свойств altKey, ctrlKey и shiftKey элемента-источника события определяется, была ли нажата, соответственно, клавиша Alt, Ctrl или Shift в момент возникновения события. Значение свойства равно true, если клавиша была нажата, и false – в противном случае.
Отметим, что установка значения свойства returnValue равным false не аннулирует событие. Оно продолжает «всплывать» по иерархии объектов. Отменяется только действия по умолчанию элемента, являющегося источником события.
Для событий мыши определены свойства, значениями которых являются координаты положения курсора в момент возникновения события.
|
|
|
Свойства clientX и clientY представляют координаты относительно области отображения браузера, offsetX и offsetY являются координатами относительно элемента-контейнера, в котором расположен элемент-источник события, screenX и screenY – абсолютные координаты курсора мыши, т.е. координаты экрана монитора. Все значения этих свойств определены в пикселях.
Свойства х и y определяют положение курсора мыши по горизонтали и вертикали относительно позиционированного контейнера, содержащего элемент-источник события. Если ни один контейнер не позиционирован, то положение определяется относительно тела документа <BODY>.
Полезное свойство событий мыши button определяет нажатую кнопку мыши. Его возможные значения:
· 0 – ни одна;
· 1 – левая;
· 2 – правая;
· 3 – одновременно левая и правая;
· 4 – средняя;
· 5 – одновременно левая и средняя;
· 6 – одновременно правая и средняя;
· 7 – все три одновременно.
Свойства toElement и fromElement применимы только к событиям onmouseover() и onmouseout(). Они определяют, от какого элемента и к какому перемещался курсор мыши, и полезны при анализе этих действий для вложенных элементов.
Некоторые элементы на HTML-странице могут получить фокус. В каждый момент времени только один элемент может обладать фокусом, и ввод данных с клавиатуры направляется именно этому элементу. Наиболее часто используемыми элементами с фокусом являются кнопки (Button) и некоторые типы элемента Input. Для таких элементов при получении ими фокуса генерируется событие onfocus(), а при потере фокуса – событие onblur(). Элемент получает фокус при щелчке на нем кнопкой мыши или перемещением на этот элемент с помощью клавиш клавиатуры.
При выделении на странице части документа возникают события, регистрирующие эти действия. Событие onselectstart() генерируется, когда пользователь нажимает кнопку мыши при расположении курсора в области документа. Если после этого нажатия он перемещает курсор мыши по документу (не отпуская нажатую кнопку), то инициируется событие onselect(), регистрирующее выделение части документа. У этого события есть действия по умолчанию: визуально отметить выделенную часть документа изменением ee фона. Это действие можно отменить, установив значение свойства retumVaiue события равным false в процедуре обработки этого события.
Для самого документа существуют два события, отмечающие некоторые стадии его обработки браузером. На самом деле эти события относятся к объекту window, находящемуся на вершине иерархии объектов, но обработчики этих событий задаются в тэге <BODY> документа. Событие onload() происходит сразу же после того, как были загружены в окно браузера все элементы страницы. Его можно использовать для выполнения действий при первоначальной или повторной загрузке страницы. Событие unload() генерируется до начала выгрузки документа, когда пользователь желает загрузить другой документ, и в процедуре обработки этого события можно, например, напомнить пользователю о выполнении некоторых действий перед окончательной выгрузкой страницы.
|
|
|
Каскадные таблицы стилей
Каскадные таблицы стилей (CSS) представляют собой простую технологию определения и присоединения стилей к документам HTML. Стиль – это все то, что определяет внешний вид документа HTML при его отображении в окне браузера: шрифты и цвета заголовков разных уровней, шрифт и разрядка основного текста, задаваемого в тэге абзаца <P>, и т.д. Стиль задается по определенным правилам, а таблица стилей – набор правил отображения, применяемых в документе, к которому присоединена соответствующая таблица стилей. Таблица стилей – это шаблон, который управляет форматированием тэгов HTML в Web-документе.
|
|
|
