Поделиться через

Сведения об объектной модели DHTML

Модель DOM динамического HTML (DHTML) позволяет разработчикам предоставлять прямой и программируемый доступ к отдельным компонентам веб-документов от индивидуальных элементов до контейнеров. Такой доступ в сочетании с моделью событий позволяет браузеру реагировать на ввод пользователя, быстро выполнять скрипты и отображать новое содержимое без загрузки дополнительных документов с сервера. Модель DOM DHTML предоставляет расширенные интерактивные функции всем разработчикам HTML.

  • Что такое объектная модель? 
  • Доступ к элементам с помощью скрипта 
  • События: восходящая маршрутизация, отмена и обработка 
  • Обработка эффектов rollover 
  • Отмена событий 
  • Специальные рекомендации 
  • Связанные темы

Что такое объектная модель?

Объектная модель делает код DHTML программируемым. Она не требует изучения новых тегов HTML и не предполагает использования новых технологий создания кода. Объектная модель основана на функциях, использовавшихся авторами для создания содержимого для браузеров предыдущих версий: помните о том, как в скрипте устанавливалось значение элемента form, а к ссылкам Microsoft Internet Explorer 3.0 добавлялось событие onmouseover? В этих случаях для доступа к коду HTML с помощью скрипта использовалась ограниченная объектная модель.

Отличие текущей объектной модели состоит в том, что программируемыми теперь являются все элементы HTML. Таким образом, все объекты HTML на странице могут управляться скриптом, который позволяет взаимодействовать с пользователем и динамически изменять содержимое страницы. Эта модель событий позволяет документу реагировать на действия пользователя (например, на перемещение указателя мыши на определенный элемент, нажатие клавиши или ввод сведений в форму). Все события можно связать со скриптом, который указывает браузеру на необходимость быстрого изменения содержимого без обращения на сервер за новым файлом. Преимущества этого состоят в том, что авторы смогут создавать интерактивные веб-сайты с меньшим количеством страниц, а пользователям не придется ожидать загрузки новых страниц с сервера, что ускорит их работу и повысит производительность Интернета в целом.

Доступ к элементам с помощью скрипта

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

Объектная модель основана на коллекциях элементов — иерархиях определенных групп. Наиболее важными являются коллекции all и children. Документ DHTML представляет собой структурированное собрание элементов. В следующем примере каждый элемент имеет область влияния, которая зависит от места тегов в документе.

<HTML>

    <BODY>

        <DIV>

            <P>Текст в

                <B>абзаце</B>

            </P>

            <IMG id=image1 src="mygif.gif">

        </DIV>

        <IMG id=image2 src="mygif.gif">

    </BODY>

</HTML>

В приведенном примере объект div содержит объект p и объект img с именем image1, а также является для них вышестоящим элементом. В свою очередь объекты image1 и p являются подчиненными элементами div. Объект img с именем image2 является подчиненным элементом объекта body.

Каждый объект элемента имеет коллекцию all, которая содержит все элементы, расположенные ниже этого элемента в иерархии, а также коллекцию children, которая содержит только элементы, являющиеся прямыми потомками этого элемента. В примере выше элемент b присутствовал бы в коллекции all объекта div, но не был бы включен в коллекцию children объекта div. Элемент div входит в коллекцию children объекта body, а элемент p не входит.

Помимо коллекций в каждом элементе сам документ (в виде объекта документа) имеет несколько коллекций элементов и других объектов. Наиболее важна коллекция all, содержащая все элементы веб-страницы. Эта коллекция является основным способом обращения к элементам через скрипт. Дополнительные сведения об использовании коллекций см. в разделе Создание скриптов для элементов и коллекций.

События: восходящая маршрутизация, отмена и обработка 

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

Обработка событий выполняется не только в Internet Explorer 4.0 или Internet Explorer 3.0 — Netscape Navigator 3.x и Communicator также обрабатывают события. Особенностью Internet Explorer 4.0 является то, что источниками событий являются элементы HTML-кода на веб-странице, а количество типов создаваемых событий существенно увеличено. Раньше события могли создаваться ограниченным числом элементов HTML (привязками, гиперкартами, элементами форм, приложениями и объектами). В модели событий Internet Explorer 4.0 каждый элемент HTML может служить источником всех событий мыши и клавиатуры.

Ниже представлен набор стандартных событий, которые создаются элементами HTML в Internet Explorer 4.0.

Событие мыши Создается при следующих действиях:
onmouseover Перемещение указателя мыши на элемент (наведение).
onmouseout Перемещение указателя мыши с элемента (вывод указателя).
onmousedown Нажатие любой кнопки мыши.
onmouseup Отпускание любой кнопки мыши.
onmousemove Перемещение указателя мыши в элементе.
onclick Щелчок левой кнопкой мыши по элементу.
ondblclick Двойной щелчок левой кнопкой мыши по элементу.
Событие клавиатуры Создается при следующих действиях:
onkeypress Нажатие и отпускание кнопки (полный цикл нажатия). Если клавиша удерживается нажатой, то создается несколько событий onkeypress.
onkeydown Нажатие клавиши. Если клавиша удерживается, создается только одно событие.
onkeyup Отпускание клавиши.

Чтобы разработчики могли создавать компактный и простой в обслуживании код, Internet Explorer 4.0 поддерживает новый способ обработки событий — восходящую маршрутизацию. Этот метод используется в Windows, OS/2, OSF Motif и на других платформах с графическим пользовательским интерфейсом для обработки событий в интерфейсах. В HTML восходящая маршрутизация используется впервые и обеспечивает эффективную модель внедрения обработки событий в веб-документы.

Если элемент HTML создавал событие в предыдущих версиях, но для него не был зарегистрирован обработчик, то событие исчезало и не повторялось. Восходящая маршрутизация позволяет передавать эти события для обработки в вышестоящий элемент. Событие переходит вверх по иерархии элементов до момента обработки или до момента достижения верхнего объекта document.

Восходящая маршрутизация событий имеет следующие преимущества:

  • Обеспечение одновременной обработки нескольких действий.
  • Сокращение объема кода на веб-странице.
  • Сокращение количества изменений кода, необходимых для обновления документа.

Ниже приведен простой пример восходящей маршрутизации событий.

<HTML>

<BODY>

<DIV id=OuterDiv style="background-color: red" onmouseover="alert(window.event.srcElement.id);">

Это текст

<IMG id=InnerImg>

</DIV>

</BODY>

</HTML>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_01.htm

Когда пользователь наводит указатель мыши на текст, в диалоговом окне появляется текст OuterDiv. Когда пользователь наводит указатель мыши на изображение, в диалоговом окне появляется текст InnerImg.

Обратите внимание на то, что событие onmouseover для объекта img было обработано несмотря на то, что оно не имеет обработчика. Почему это произошло? Событие onmouseover из объекта img передается в вышестоящий элемент — объект div. Так как объект div имеет зарегистрированный обработчик события onmouseover, то он запускает и создает указанное диалоговое окно.

При каждом возникновении события в объекте window создается особое свойство. Это свойство содержит объект event. Объект event содержит контекстные сведения о возникшем событии, в том числе расположение мыши, состояние клавиатуры и исходный элемент события.

Исходный элемент — это элемент, вызывающий событие. Доступ к нему осуществляется через свойство srcElement объекта window.event.

В приведенном выше примере в диалоговом окне отображается свойство id элемента события srcElement.

Обработка эффектов rollover

Разработчик создает эффект rollover, чтобы определенный элемент страницы реагировал на перемещение указателя по нему. В браузере Internet Explorer 4.0 процесс создания эффекта rollover упрощен.

<HTML>

<HEAD>

<STYLE>

.Item {

   cursor: hand;

                               font-family: verdana;

   font-size: 20;

   font-style: normal;

   background-color: blue;

                               color: white

 }

.Highlight {

   cursor: hand;

                               font-family: verdana;

   font-size: 20;

   font-style: italic;

   background-color: white;

                               color: blue

 }

</STYLE>

</HEAD>

<BODY>

<SPAN class=Item>Молоко</SPAN>

<SPAN class=Item>Печенье</SPAN>

<SPAN class=Item>Яйца</SPAN>

<SPAN class=Item>Ветчина</SPAN>

<SPAN class=Item>Сыр</SPAN>

<SPAN class=Item>Макароны</SPAN>

<SPAN class=Item>Курица</SPAN>

<SCRIPT>

function rollon() {

  if (window.event.srcElement.className == "Item") {

     window.event.srcElement.className = "Highlight";

  }

}

document.onmouseover = rollon;

function rolloff() {

  if (window.event.srcElement.className == "Highlight") {

     window.event.srcElement.className = "Item";

  }

}

document.onmouseout = rolloff;

</SCRIPT>

</BODY>

</HTML>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_02.htm

В приведенном выше примере семь объектов span исходно используют класс Item. При перемещении указателя мыши на любой из этих элементов он будет настроен на использование класса Highlight.

Нововведения Internet Explorer 4.0 делают возможными следующие действия:

  • Создание событий из объекта span. Раньше разработчикам приходилось помещать все объекты span в привязку для получения событий.
  • Получение событий на уровне объекта document с помощью восходящей маршрутизации событий. Разработчику не требуется создавать отдельные обработчики событий для каждого из элементов, участвующих в эффекте. Например, если на страницу будет добавлена разметка HTML, то дополнительные элементы могут использовать модель событий без изменения кода. Обратите внимание на то, что объект document является вышестоящим объектом для всех объектов тела документа.

Отмена событий

Все события передаются вышестоящему элементу рекурсивным образом вплоть до объекта document, если событие не отменяется. Чтобы отменить событие, необходимо установить свойство обработчика window.event.cancelBubble равным true. Обратите внимание на то, что неотмененные события будут передаваться далее по иерархии и обрабатываться всеми вышестоящими элементами даже в том случае, если событие уже обработано.

Отмену восходящей маршрутизации не следует путать с отменой действия по умолчанию для события. Некоторые события (например, событие onclick в привязке) имеют действие по умолчанию. При щелчке по привязке действием по умолчанию является переход в текущем окне по URL-адресу, указанному в свойстве src. При получении значения false из обработчика событий или при установке window.event.returnValue равным false будет отменено действие по умолчанию, но маршрутизация будет продолжена, если дополнительно не установлено свойство window.event.cancelBubble. Отмена маршрутизации события также не предполагает отмены действия по умолчанию.

В последнем примере показано использование маршрутизации событий для применения эффекта к нескольким элементам. Чтобы исключить элемент из этого эффекта, замените строку кода

 <SPAN class=Item>Ветчина</SPAN>

на:

<SPAN class=Item onmouseover="window.event.cancelBubble = true;"

    onmouseout="window.event.cancelBubble = true;">Ветчина</SPAN>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_03.htm

Теперь стиль слова «Ветчина» не изменится при наведении на него указателя мыши. Это связано с тем, что отменены события onmouseover и onmouseout. Они не были переданы объекту document, поэтому их обработка для слова «Ветчина» в объекте document никогда не производилась.

Специальные рекомендации

Событие onmouseover одновременно может возникать только в одном объекте. Рассмотрим следующий случай:

<DIV id=MyDiv>

<IMG id=MyImg>

</DIV>

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

MyDiv:: onmouseover

MyDiv:: onmouseout

MyImg:: onmouseover

Перемещение указателя мыши с элемента img повторно вызывает событие MyDiv::onmouseover.

Иногда разработчику необходимо определить момент выхода указателя мыши из элемента div для применения особого эффекта. Для этого недостаточно просто отследить событие onmouseout. Для упрощения работы Internet Explorer 4.0 указывает исходный (fromElement) и целевой элемент (toElement) для событий onmouseover и onmouseout. Эти свойства можно использовать в сочетании с методом contains для определения момента выхода указателя мыши из указанной области.

Ниже приведен пример использования описанных свойств и методов.

<HTML>

<BODY id=Body>

<DIV id=OuterDiv style="width: 100px; height: 50px; background: red"

    onmouseover="over();" onmouseout="out();">

<IMG id=Img1>

<IMG id=Img2>

<IMG id=Img3>

</DIV>

<SCRIPT>

function over() {

    var s;

    s = "onmouseover: "+window.event.srcElement.id+" from: "+

window.event.fromElement.id+" to: "+window.event.toElement.id;

    alert(s);

}

function out() {

    var s;

    s = "onmouseout: "+window.event.srcElement.id+" from: "+

window.event.fromElement.id+" to: "+window.event.toElement.id;

    alert(s);

    if (!(OuterDiv.contains(window.event.toElement))) {

        alert("Out Now");

    }

}

</SCRIPT>

</BODY>

</HTML>

Пример кода: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/dom_04.htm

Связанные темы