=> Главная База Знаний HTML 13.3. Объектная модель документа


13.3. Объектная модель документа

13.3. Объектная модель документа

Чтобы можно было успешно применить полученные значения по программированию на JavaScript, нужно рассмотреть еще один специфический момент – это то, как сценарии могут воздействовать на HTML‑документ. Для этого необходимо изучить технологию представления HTML‑документа в виде совокупности объектов – объектную модель документа (DOM, Document Object Model). DOM включает не только объекты, из которых состоит документ, но и объекты, позволяющие получать различную информацию о браузере, системе (в частности, о видеосистеме компьютера), работать с окнами и многое другое.

Объект document

Для программиста на JavaScript HTML‑документ представляется в виде объекта document. Этот глобальный объект существует в единичном экземпляре. О создании объекта document заботится интерпретатор.

Свойства и методы объекта document

Итак, объект document предоставляет ряд свойств и методов, позволяющих осуществлять практически любые манипуляции с HTML‑документом. Основные свойства объекта document приведены в табл. 13.2.

Таблица 13.2. Свойства объекта document

Свойства, отвечающие за цветовое оформление, хранят целочисленные значения. Другие свойства, кроме возвращающих коллекции, хранят строки. Особо следует рассмотреть свойства, которые возвращают коллекции: all, anchors, forms, frames, images и links. В этих коллекциях находятся объекты, описывающие соответствующие элементы HTML‑документа.

Коллекции – это тоже объекты, во многом похожие на массивы. Однако коллекции предоставляют доступ к своим элементам c помощью метода item(). Причем доступ может осуществляться как по номеру элемента в коллекции, так и по его имени (задается атрибутом id или name элемента). Нумерация элементов в коллекциях начинается с нуля. Кроме того, для коллекций предусмотрено свойство length, хранящее количество элементов в коллекции.

В качестве примера рассмотрим, как получить доступ к элементам следующего HTML‑документа (пример 13.3).

Пример 13.3. HTML-документ, к элементам которого нужно получить доступЗаголовок документа

Главный заголовок документа

Текст документа...

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

var elements = []; //Массив, в который скопируем ссылки на объекты страницыvar i;for (i=0; i

В примере 13.3 в коллекции all содержится шесть элементов, поэтому массив elements после выполнения приведенного фрагмента программы должен содержать шесть элементов. Обратите внимание, как осуществляется доступ к элементам коллекции all: имя метода item() можно опускать.

Если бы доступ к элементам коллекции осуществлялся по имени HTML‑элементов, то можно было бы получить объекты, описывающие заголовок и абзац, следующим образом:

var h = document.all(«main_part»);var p = document.all("par1");

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

var h = main_part;var p = par1;

Кроме достаточно богатого набора свойств, можно пользоваться методом write() объекта document для добавления к HTML‑документу любого текста прямо из сценария. Метод write() принимает строку, в которой может содержаться любое HTML‑форматирование, например:

document.write('

Текст, напечатанный сценарием

')

При выполнении этого фрагмента программы не только появляется текст заголовка в окне браузера, но и создается объект с именем part2, к которому можно получить доступ с использованием той же коллекции all.

Использование методов open(URI_документа) и close() объекта document позволяет открывать новые HTML‑документы и закрывать окно браузера с текущим документом, например:

open(«13.1.html») //Открываем пример 13.1 в новом окнеclose(); //Пытаемся закрыть текущий документ

Управление элементами документа

Итак, выше рассмотрено, как можно получить доступ к объектам, описывающим HTML‑элементы документа. Теперь же рассмотрим, какие общие действия можно производить с полученными объектами.

Свойства, которые доступны для большинства элементов документа, приведены в табл. 13.3.

Таблица 13.3. Основные свойства элементов документа

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

Таблица 13.4. Основные методы элементов документа

С использованием приведенных в таблицах свойств и методов можно осуществлять практически любые манипуляции с документом, показываемым в окне браузера. Сейчас дополнительно будут рассмотрены некоторые особенности доступа к элементам таблиц: доступ к строкам и ячейкам.

Объекты, описывающие таблицы, поддерживают внутреннюю коллекцию rows, с помощью которой организовывается доступ к отдельным строкам таблицы. Эти объекты поддерживают также методы insertRow(номер) и deleteRow(номер), которые принимают в качестве параметра номер строки и позволяют вставить или удалить строку таблицы. Если метод insertRow() вызвать без параметра, то строка будет добавлена в конец таблицы. При успешном добавлении строки метод insertRow возвращает ссылку на объект, описывающий созданную строку.

Каждым элементом коллекции rows является объект, одним из свойств которого является коллекция cells, содержащая объекты, управляющие ячейками таблицы. Каждый элемент коллекции cells позволяет оперировать конкретными ячейками таблицы. Добавление ячеек в строку таблицы можно осуществлять при помощи метода insertCell(номер) объектов коллекции rows. Удалять же ячейки можно, используя метод deleteCell(номер) объектов той же коллекции.

Наконец, как завершающий этап знакомства с объектом document создадим несколько страниц, использующих его возможности.

Страница следующего примера будет представлять собой своеобразный каталог изображений. Изображения вместе с текстом, описывающим их, будут помещены в таблице. При этом помещение и удаление данных должно выполняться интерактивно (то есть этим управляет пользователь). Внешний вид страницы примера приведен на рис. 13.1.

Рис. 13.1. Изменяемая страница (каталог изображений)

При реализации примера код сценария и HTML‑код страницы расположены в отдельных файлах. Файл документа может иметь произвольное имя. Он выглядит следующим образом (пример 13.4).

Пример 13.4. Файл HTML-документаПример модифицирования таблицы сценарием

Новое изображениеКод: Описание:
Путь к изображению:

КодОписаниеПросмотр

В приведенном примере обратите внимание на элемент TBODY таблицы. Присвоив ему имя, вы можете работать с телом таблицы как с самостоятельной таблицей. Это же справедливо для THEAD и TFOOT. Обратите также внимание на получение значений, введенных в текстовые поля: в большинстве случаев можно пользоваться не методами getAttribute() и setAttribute(), а свойствами, которые имеют такие же названия, как и соответствующие атрибуты.

Теперь очередь файла с кодом сценария. В примере он имеет имя script_13_4.js (JS – стандартное расширение для файлов со сценариями на JavaScript) (пример 13.5).

Пример 13.5. Файл script_13_4.js//Функция принимает код, название, путь изображения и добавляет//запись в таблицу function add_image(code, imagename, path){if (valid_data(code, imagename, path)){//Формирование строки таблицы (в части TBODY)var row = mytable.insertRow();//Ячейка с кодом рисунка row.insertCell().innerHTML = "" + code + "";//Ячейка с названием row.insertCell().innerHTML = imagename;//Ячейка с изображением row.insertCell().innerHTML = '';}}//Функция проверяет правильность введеных данных function valid_data(code, imagename, path){//Проверка, введены ли все значения if (code == "" || imagename == "" || path == ""){alert("Введите значения во все поля");return false;}else{//Проверим, чтобы код изображения не дублировался var i;for (i=0; i

Как видно, в файле script_13_4.js реализованы три функции. Первая функция add_image() используется для добавления записей в таблицу. Перед добавлением каждой новой записи она проверяет (с помощью функции valid_data()), чтобы были введены все данные (код, описание и путь изображения), а также, чтобы код нового изображения не дублировался кодом одного из изображений, ранее добавленных в таблицу. Третья функция delete_image() используется для удаления записи из таблицы.

Из примера 13.5 можно увидеть применение коллекций rows и cells таблицы на практике.

Помещаем свое меню на страницу

Рассмотрим еще один довольно любопытный пример, позволяющий разнообразить оформление страницы. Используя таблицы, CSS и простые сценарии, создадим свое красочное меню. В пункты этого меню можно вставлять маленькие изображения. Пункты будут подсвечиваться при наведении на них указателя мыши. Внешний вид меню представлен на рис. 13.2.

Рис. 13.2. Внешний вид меню

Ниже приводится текст HTML‑документа с созданным меню (пример 13.6).

Пример 13.6. Документ с менюСтраница с меню

Из приведенного текста можно увидеть, каким образом используется таблица: пунктами меню являются строки таблицы. Чтобы строки таблицы подсвечивались при наведении указателя мыши, их стилевой класс динамически изменяется при обработке событий onMouseOver, onMouseOut. Изменив определения стилевых классов item, selected, menu, можно легко добиться нужного вида меню.

При выборе каждого из пунктов меню вызывается соответствующая функция‑обработчик (см. значения атрибутов onClick для элементов TR). Все функции‑обработчики собраны в файле menu.js, текст которого приводится ниже (пример 13.7).

Пример 13.7. Содержимое файла menu.js/*В этом файле содержатся функции-обработчики для каждого пункта меню*/function item1_click(){alert("Вы выбрали первый пункт меню");//Другие действия...}function item2_click(){alert("Вы выбрали второй пункт меню");//Другие действия...}function item3_click(){alert("Вы выбрали третий пункт меню");//Другие действия...}function item4_click(){alert("Вы выбрали четвертый пункт меню");//Другие действия...}function item5_click(){alert("Вы выбрали пятый пункт меню");//Другие действия...}

В каждую их приведенных выше функций помещен только код, сообщающий о работоспособности отдельного пункта меню.

Объект navigator

Глобальный объект navigator позволяет получить некоторую информацию о браузере, в котором происходит просмотр страницы со сценарием. Свойства объекта navigator, поддерживаемые большинством браузеров (по крайней мере, не только браузером Internet Explorer), приведены в табл. 13.5.

Таблица 13.5. Свойства объекта navigator

Часто использовать объект navigator нет необходимости, однако он может очень пригодиться при создании достаточно продвинутых и «живучих» веб‑страниц, способных выбирать сценарии для выполнения в зависимости от браузера, в котором они открываются. Простейший код, позволяющий отличить браузер Internet Explorer, приведен ниже (пример 13.8).

Пример 13.8. Определение браузераfunction do_script(){if (navigator.appName == "Microsoft Internet Explorer"){//Код для Internet Explorer...}else{//Код для другого браузера...}}

Объект window

Глобальный объект window предоставляет возможности по манипулированию окном браузера или окном фрейма, в котором открыт документ со сценарием. Кроме того, при помощи объекта window можно открывать новые окна, манипулировать фреймами, создавать таймеры (что очень нужно для анимации) и делать еще много полезного.

Свойства и методы объекта window

Основные свойства объекта window приводятся в табл. 13.6.

Таблица 13.6. Свойства объекта window

В табл. 13.7 приведены основные методы объекта window.

Таблица 13.7. Методы объекта window

Как было сказано при описании метода open() в табл. 13.7, для этого метода предусмотрено несколько дополнительных параметров. Основные параметры перечислены в табл. 13.8.

Таблица 13.8. Параметры метода open()

Каждый из приведенных в таблице параметров может добавляться в строку параметры в виде: имя_параметра = значение. Так, для открытия документа в новом окне размером 300 × 400 можно использовать следующий вызов метода open():

window.open(«13.6.html», "", «width = 300, height = 400»);

Вообще, по крайней мере в браузере Internet Explorer, разделителем параметров в строке необязательно может быть запятая. Этот браузер нормально воспринимает в качестве разделителя и пробел, и точку с запятой. Еще при испытаниях метода open() в Internet Explorer замечена следующая особенность: если в строке задан хотя бы один параметр, то значения всех остальных параметров, принимающих значения 0 или 1, сбрасываются в 0. Так, созданное приведенным выше вызовом метода open() окно будет отображаться без строки состояния, панели инструментов, строки меню, полос прокрутки, строки адреса и будет неизменяемого размера.

Как можно было заметить, в табл. 13.8 приведены параметры, позволяющие задать ширину нового окна, но не приведены параметры, задающие положение окна. Эти параметры в действительности есть, но они отличаются для различных браузеров. Для Internet Explorer это left и top, а для Navigator – screenX и screenY.

Примеры использования объекта window

Теперь рассмотрим, как можно использовать объект window для воспроизведения анимации в окне браузера.

Методы, позволяющие создавать таймеры, просто незаменимы при работе с анимацией средствами браузера. Суть данного примера состоит в последовательной загрузке изображений в элемент IMG. Интервал между сменами кадров выдерживается с помощью таймера. Всего кадров шесть (рис. 13.3).

Рис. 13.3. Изображения-кадры

Кадры меняются от первого до шестого, а затем от шестого до первого. Текст HTML‑документа со сценарием, реализующим смену кадров, приведен ниже (пример 13.9).

Пример 13.9. Анимация на страницеСтраница с анимацией

В коде сценария количество кадров задается в переменной maxFrames. Предполагается, что кадры помещаются в папке frames и имеют имена вида номер.gif.

Создание всплывающих окон

Иногда бывает удобно использовать дополнительные так называемые всплывающие окна, например, чтобы открывать в них список файлов для закачки, если речь идет о каком‑то веб‑архиве. Как вы уже догадались, в этом примере для открытия новых окон используется метод open() объекта window. Кроме открытия нового окна, в приведенном ниже примере 13.10 реализовано также его закрытие через 5 секунд.

Пример 13.10. Создание и закрытие всплывающего окнаВсплывающие окна

Щелкнитечтобы открыть новое окно на 5 секунд.

Помните, что использовать всплывающие окна следует оправданно. Чаще всего пользователя очень раздражают появляющиеся неожиданно окна, например с какой‑нибудь рекламой.

Объект style

Объект style, который для большинства элементов страницы поддерживается как свойство, предоставляет большие возможности по манипулированию стилем элементов. Эти возможности такие же, как и доступные при использовании таблиц стилей: можно получать и указывать значения тех же свойств, что и с использованием CSS. Сначала рассмотрим, как формируются имена свойств объекта style.

Свойства объекта style

Итак, имена свойств CSS, состоящие из одного слова, в таком же виде и используются как имена свойств объекта style, например:

el.style.width = 100;el.style.color = "red";

Здесь el предоставляет доступ к элементу страницы со значением атрибута id, равным «el».

В приложении 2, где приведен список основных свойств CSS, можно увидеть, что названия многих свойств состоят из нескольких слов, разделенных символом –. Так вот, имена таких свойств CSS преобразуются в имена свойств объекта style следующим образом: первое слово имени записывается cо строчной буквы, остальные слова начинаются с прописной буквы, все символы – из имени свойства удаляются. Ниже приведен пример для того же элемента el:

el.style.borderStyle = «solid»; //свойство border-styleel.style.borderColor = "blue"; //свойство border-colorel.style.borderBottomWidth = "10mm"; //свойство border-bottom-width

Как видно, значения свойств могут быть в тех же единицах измерения, которые применяются для CSS. Однако это хорошо до тех пор, пока не нужно производить вычисления с использованием текущих параметров элемента. Так, в приведенном выше примере el.style.borderBottomWidth вернет строковое значение «10mm». Удобно ли производить вычисления с такими значениями? В табл. 13.9 приведен перечень дополнительных свойств, поддерживаемых только интерпретатором браузера Internet Explorer, но значительно облегчающих программирование таких вещей, как перемещение элементов страницы.

Таблица 13.9. Дополнительные свойства объекта style

ПримечаниеПри использовании описанных в этом разделе свойств объекта style следует учитывать одну неприятную особенность: до того, как сценарий может получить значение свойства, это значение должно быть установлено также с использованием сценария.

Примеры использования объекта style

Теперь рассмотрим три примера, иллюстрирующих возможности элемента style. Первые два из них связаны с анимацией, а в последнем примере приводится реализация усовершенствованного меню на основе таблицы.

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

Рис. 13.4. Перемещение «шариков» внутри элемента DIV

Ниже приведен текст HTML‑документа, который показан на рис. 13.4 (пример 13.11).

Пример 13.11. Перемещающиеся элементыСтраница с анимацией

Здесь предполагается использование пяти изображений из папки balls. Как видно из примера, чтобы сценарий нормально работал с координатами и размером изображений, соответствующие свойства пришлось установить не в CSS, а опять же с помощью сценария.

Во внешний файл вынесен сценарий, отвечающий за перемещение изображений (файл balls.js). Cодержимое файла balls.js выглядит следующим образом (пример 13.12).

Пример 13.12. Содержимое файла balls.js//Массив со ссылками на объекты-изображения шариков var balls = [ball1, ball2, ball3, ball4, ball5];//Массивы скоростей по горизонтали и вертикали (от –10 до 10)var xSpeed = [rand(–10,10), rand(–10,10), rand(–10,10),rand(–10,10), rand(–10,10)];var ySpeed = [rand(–10,10), rand(–10,10), rand(–10,10),rand(–10,10), rand(–10,10)];//Минимальные значения координат изображений var minX = ball1.style.pixelLeft;var minY = ball1.style.pixelTop;//Максимальные значения координат изображений var maxX = area.style.pixelWidth + minX – balls[0].style.pixelWidth;var maxY = area.style.pixelHeight + minY – balls[0].style.pixelHeight;//Назначаем функцию обновления изображения, вызываемую по таймеру window.setInterval(redraw, 100);//Функция генерации случайных значений function rand(min, max){return Math.random()*(max–min)+min;}//Функция обновления координат и перерисовки изображений function redraw(){var i, newX, newY;for (i=0; i maxX){newX = maxX;xSpeed[i] = –xSpeed[i];}else if (newX < minX){newX = minX;xSpeed[i] = –xSpeed[i];}if (newY > maxY){newY = maxY;ySpeed[i] = –ySpeed[i];}else if (newY < minY){newY = minY;ySpeed[i] = –ySpeed[i];}//Наконец, перемещаем изображение balls[i].style.pixelLeft = newX;balls[i].style.pixelTop = newY;}}

В следующем примере рассматривается сценарий, позволяющий случайным образом изменять цвет текста, для которого задан определенный стилевой класс. Стилевой класс в примере имеет название colored. Пример разбит на две части: собственно сценарий (файл coloredtext.js) и HTML‑документ, использующий возможности этого сценария.

Для начала рассмотрим сам сценарий, код которого приведен ниже (пример 13.13).

Пример 13.13. Содержимое файла coloredtext.js//Поиск всех элементов, имеющих класс «colored»var i, j = 0;var elements = [];for (i=0; i=0) ? R : 0;R = (R<=255) ? R : 255;G += rand(–8, 8);G = (G>=0) ? G : 0;G = (G<=255) ? G : 255;B += rand(–8, 8);B = (B>=0) ? B : 0;B = (B<=255) ? B : 255;//Установка нового цвета для всех элементов for (i=0; i

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

Изменение цвета в примере осуществляется по таймеру. Значения RGB‑составляющих цвета случайным образом изменяются на небольшие значения, что обеспечивает эффект этакого плавного перехода цвета. Еще следует отметить, что цвет всех отобранных элементов всегда одинаков. Это сделано для упрощения программы.

В примере 13.14 показано, как используется рассматриваемый сценарий.

Пример 13.14. Страница с разноцветным текстомРазноцветный текст

Обычный заголовок

Разноцветный заголовок

Обычный текст

Разноцветный текст

Теперь создадим усовершенствованный вариант рассмотренного ранее меню. Сейчас это будет не просто набор пунктов, все время находящийся на странице, а настоящее меню, похожее на то, которое имеют многие Windows‑приложения.

Пример реализован следующим образом: вверху окна организуется строка меню, в которой присутствуют два пункта, открывающих два различных меню. Первое меню выглядит так, как показано на рис. 13.5.

Рис. 13.5. Открыто первое меню

Второе меню, вызываемое при выборе второго пункта в строке меню, показано на рис. 13.6.

Рис. 13.6. Открыто второе меню

Как видно, оба меню появляются под соответствующими пунктами строки меню. Теперь рассмотрим, как реализован этот пример, а также какие существуют направления усовершенствования этого примера. Пример разбит на две части: HTML‑документ и сценарий (файл popup_menu.js). Сначала разберем текст HTML‑документа (пример 13.15).

Пример 13.15. Документ со строкой менюСтраница с меню

Текст страницы...

Хотя документ практически не содержит текста, являющегося обычным содержимым страницы (ведь мы рассматриваем не наполнение страницы текстов, а меню), он все равно получился довольно объемным. Больше всего места в документе примера 13.5 занимают описания двух меню. Описание первого меню практически не отличается от рассмотренного ранее в примере 13.6. Второе же меню, обозначенное как menu2, создано по такому же шаблону.

В таблицу стилей пришлось добавить новый стиль menu_line. После этого очень просто создавать любое количество строк меню на странице. При создании строки меню основной работой является настройка пунктов, которые будут открывать нужные меню (см. определение пунктов в таблице с id, равным main_menu1 в примере 13.5).

При выборе пунктов из строки меню происходит вызов одной и той же функции сценария. Этой функции в качестве параметров передается ссылка на меню, которое нужно открыть, а также ссылки на строку меню и ссылка на пункт, к которому относится показываемое меню. При рассмотрении сценария станет ясно, зачем это нужно.

Ниже приводится текст сценария из файла popup_menu.js (пример 13.16).

Пример 13.16. Содержимое файла popup_menu.js/*Функция показывает заданное всплывающее меню под заданным главным пунктом заданного меню*/var lastMenu = null; //Предыдущее показанное меню function show_menu(menu, main_menu, item){if (menu.className == "menu"){//Закрываем открытое меню hide_menu();return;}if (lastMenu != null)//Скрываем прошлое меню hide_menu();//Определяем положение меню menu.className = "menu";menu.style.top = main_menu.offsetTop + main_menu.clientHeight;menu.style.left = main_menu.offsetLeft + item.offsetLeft;lastMenu = menu;}//Функция скрывает меню, открытое ранее function hide_menu(){lastMenu.className = "hidden";lastMenu = null;}/*Далее содержатся функции-обработчики для каждого пункта меню "menu1"*/function menu1_item1_click(){hide_menu();alert("Вы выбрали первый пункт в меню1");//Другие действия...}function menu1_item2_click(){hide_menu();alert("Вы выбрали второй пункт в меню1");//Другие действия...}function menu1_item3_click(){hide_menu();alert("Вы выбрали третий пункт в меню1");//Другие действия...}function menu1_item4_click(){hide_menu();alert("Вы выбрали четвертый пункт в меню1");//Другие действия...}function menu1_item5_click(){hide_menu();alert("Вы выбрали пятый пункт в меню1");//Другие действия...}/*Далее содержатся функции-обработчики для каждого пункта меню "menu2"*/function menu2_item1_click(){hide_menu();alert("Вы выбрали первый пункт в меню2");//Другие действия...}function menu2_item2_click(){hide_menu();alert("Вы выбрали второй пункт в меню2");//Другие действия...}function menu2_item3_click(){hide_menu();alert("Вы выбрали третий пункт в меню2");//Другие действия...}

Первая функция приведенного в примере 13.16 сценария отвечает за правильное отображение меню. Первый параметр является ссылкой на показываемое меню (таблица в HTML‑документе).

Второй и третий параметры используются для корректного позиционирования показываемого меню. Перед тем как будет показано новое меню, скрывается то, которое было показано ранее (если оно имеется). Для этого ссылка на отображаемое меню сохраняется в глобальной переменной lastMenu.

Если пользователь открыл меню, но потом передумал выбирать какой‑либо пункт, он должен иметь возможность закрыть меню. В рассматриваемом примере для закрытия меню пользователь должен повторно выбрать тот же самый пункт строки меню.

Основной объем сценария составляют обработчики выбора пунктов меню. Думаю, принцип именования функций‑обработчиков в зависимости от принадлежности в меню очевиден. Новой же деталью является наличие в каждом обработчике вызова функции hide_menu(). Этим достигается закрытие меню после выбора одного из его пунктов.

Объект screen

Глобальный объект screen предоставляет набор свойств, которые сообщают сценарию некоторую информацию о возможностях видеосистемы компьютера пользователя.

Свойства объекта screen приводятся в табл. 13.10.

Таблица 13.10. Свойства объекта screen

Объект screen может представлять большой интерес для тех, кто заботится о том, чтобы пользователь получал максимум комфорта при просмотре веб‑страниц независимо, например, от разрешения своего монитора.

Объект event

Глобальный объект event является большим подарком для тех, кто хочет создавать сценарии, досконально отслеживающие и адекватно реагирующие практически на все действия пользователя. Поддержка этого объекта очень сильно отличается в различных браузерах. В этом разделе рассмотрено использование объекта event только для браузера Internet Explorer.

Свойства объекта event

Итак, используя браузер Internet Explorer, получить доступ к объекту event можно, как к свойству объекта window. Можно также указывать event как глобальный объект. Свойства объекта event приведены в табл. 13.11.

Таблица 13.11. Свойства объекта event

Примеры использования объекта event

Для демонстрации работы с объектом event рассмотрены два небольших примера, использующие информацию о положении указателя и состоянии кнопок мыши.

В первом примере используется возможность получения координат указателя мыши относительно различных объектов документа. Текст HTML‑документа примера приведен ниже. Обратите внимание, что благодаря «всплытию» событий отслеживать перемещение мыши можно, только написав обработчик события onMouseMove для элемента BODY (это самый верхний элемент, до которого доходит событие) (пример 13.17).

Пример 13.17. Отслеживание положения мышиСлежение за мышью

Экранные координаты:
Оконные координаты:
Относительно элемента:
Относительно родителя:

Кнопки мыши (л|c|п):

Заголовок

Содержимое страницы...

Приведенный HTML‑документ выглядит так, как показано на рис. 13.7.

Рис. 13.7. Отслеживание указателя и состояния кнопок мыши

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

Пример 13.18. Перетаскивание элементовПеремещение элементов страницыПеремещаемый рисунок

Перемещаемый текст

Перемещаемый заголовок

Документ, текст которого приведен в примере 13.18, после перетаскивания элементов показан на рис. 13.8.

Рис. 13.8. Перетаскивание элементов страницы

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