конспект курса Java Script. Программирование клиентской части Интернет приложений с использованием JavaScript
 Скачать 1.49 Mb.
|
Привет!Это простой пример, ну очень простой пример. 93 обработчик событий, то событие будет обрабатываться всеми обработчиками, если только в каком-то обработчике не будет аннулировано его "всплытие" вверх по иерархии объектов. Объект event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным true. После этого соответствующее событие не существует, и обработчики этого события всех, расположенных выше элементов, не вызываются. Пример 20. Аннулирование "всплытия" события Аннулирование "всплытия" события в элементе bold1 приводит к тому, что щелчок на нем не отображает диалогового окна из обработчика этого события в элементе body. Для всех остальных элементов это действие продолжает выполняться. Привет!Это простой пример, ну очень простой пример. 94 Свойство srcElement определяет элемент документа, явившийся источником события. Оно может быть полезным при централизованной обработке событий элементом, расположенным выше в иерархии объектов документа истинного "виновника" события, и, в зависимости от типа элемента, программа-обработчик может предпринять соответствующие действия. Важное свойство cancelBubble, аннулирующее событие и прекращающее передачу его на обработку вверх по иерархии объектов, рассмотрено ранее. Свойство returnValue является булевым и возвращает значение true или false после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии значение этого свойства можно использовать для альтернативной обработки события. Кроме того, если в обработчике события элемента, для которого определены действия по умолчанию, это свойство устанавливается равным false, то это отменяет выполнение действий по умолчанию. Так, для элемента A действием по умолчанию является переход по ссылке, задаваемой атрибутом HREF. По значениям свойств altKey, ctrlKey и shiftKey элемента-источника события определяется, была ли нажата, соответственно, клавиша Значение свойства равно true, если клавиша была нажата, и false в противном случае. Свойства ctrlLeft, altLeft и shiftLeft позволяют определить, была ли нажата в момент возникновения события левая из указанных в названии свойств клавиша. Следующий фрагмент сценария отменяет переход по любой связи в документе, если при щелчке на ней была нажата клавиша Пример 21. Отмена перехода по гиперсвязи document.onclick=click; function click() { if((window.event.srcElement.tagName=='A') && window.event.shiftKey) { window.event.returnValue=false; } } Установка значения свойства returnValue равным false не аннулирует событие. Оно продолжает "всплывать" по иерархии объектов. Отменяется только действия по умолчанию элемента, являющегося источником события. Для событий мыши определены свойства, значениями которых являются координаты положения курсора в момент возникновения события. Свойства clientX и clientY представляют координаты относительно области отображения браузера, offsetX и offsetY являются координатами 95 относительно элемента-контейнера, в котором расположен элемент-источник события, screenX и screenY – абсолютные координаты курсора мыши, т.е. координаты экрана монитора. Все значения этих свойств определены в пикселях. Свойства x и y определяют положение курсора мыши по горизонтали и вертикали относительно позиционированного контейнера, содержащего элемент-источник события. Если ни один контейнер не позиционирован, то положение определяется относительно тела документа . Полезное свойство событий мыши button определяет нажатую кнопку мыши (только для событий onmousedown, onmouseup и onmousemove): Значение Нажаты кнопки мыши 0 ни одна 1 Левая 2 Правая 3 Одновременно левая и правая 4 Средняя 5 Одновременно левая и средняя 6 Одновременно правая и средняя 7 Все три одновременно Свойства toElement и fromElement применимы только к событиям onmouseover и onmouseout. Они определяют, от какого элемента и к какому перемещался курсор мыши, и полезны при анализе этих действий для вложенных элементов. Свойство keyCode хранит ASCII-код нажатой клавиши клавиатуры при событиях onkeydown, onkeyup и onkeypress. Для события onkeydown свойство repeat равно true, если оно происходило непрерывно два и более раз (нажата и удерживается клавиша) и false в противном случае. Для события onmousewheel, если свойство wheelDelta имеет значение -120, то колесо вращалось на себя, если 120, то от себя. Пример 22. Изменение размеров картинки Свойство каскадных таблиц стилей zoom (расширение компании Microsoft к свойствам каскадных таблиц стилей, вошедших в рекомендации консорциума WWW) позволяет изменять масштаб отображения элемента HTML на странице, отображаемой в окне браузера. Его значением является коэффициент изменения размера элемента HTML по сравнению с его нормальным размером. Он задается в виде вещественного числа или в виде процента. Значения от нуля до единицы или от 0% до 100% приводят к уменьшению изображения элемента, а значения большие единицы или 100% к увеличению. В примере отслеживается поворот колесика мыши, когда указатель расположен над рисунком (элемент IMG), и 96 увеличение (поворот колесика "на себя") или уменьшение (поворот колесика "от себя") значения свойства zoom элемента IMG на 5%, что приводит к увеличению или уменьшению размеров рисунка.  97 Часть III. Динамический HTML Урок 13. Объектная модель документа DHTML Объектная модель документа определяет логическую структуру документа и способ доступа и манипулирования составляющими документ элементами. Все, что определено в документе тегами языка разметки HTML-страниц, становится доступным для изменения, удаления и добавления. Программист может создавать документы, свободно перемещаться по их структуре и добавлять, изменять или удалять элементы и/или их содержимое. Эту технику принято называть динамическим HTML. Динамический HTML в Internet Explorer 4.0 был реализован на базе объектной модели DHTML, разработанной фирмой Microsoft и послужившей основой для объектной модели DOM консорциума WWW. Начиная с версии 5.0 в браузере Internet Explorer полностью реализована эта объектная модель документа, но объектная модель документа DHTML продолжает существовать. Структура документа В объектной модели DHTML любой документ представляется в виде логической древовидной структуры. Следующий фрагмент документа HTML: В блоковый элемент, каким является абзац, можно добавлять встраиваемые элементы, каковым является элемент IMG:   98 Каждый элемент документа HTML является в этой модели программируемым объектом. Это означает, что существует возможность динамически изменять содержимое элементов страницы, перемещать их по иерархии, добавлять новые элементы или удалять существующие, изменять форматирование (внешний вид) элементов страницы. Подобные действия реализуются через сценарии, выполняемые как реакция на определенные действия пользователя или системы. Иерархия объектов Каждый объект в иерархии, предоставляемой объектной моделью документа HTML, можно использовать в сценарии JavaScript, но для этого необходимо получить доступ к соответствующему объекту. В иерархической объектной модели одну из важных ролей при доступе к объектам играют два семейства, являющиеся свойствами любого объекта HTML, — all и children. В первом содержатся ссылки на все объекты, расположенные ниже объекта в иерархии, тогда как второй содержит ссылки на все объекты, непосредственно порождаемые данным. Например, семейство all объекта body приведенного выше документа HTML содержит ссылки на все объекты документа, в том числе и на p1, img1, b1 и img2. Семейство children будет ссылаться только на два объекта, непосредственно порождаемых элементом body — p1, img2. На вершине всей иерархии объектов расположен объект document, который "порождает" все объекты, представляющие элементы HTML. Этот объект также имеет свойство-семейство all (семейства children у него нет), содержащий ссылки на все объекты документа. Отметим одну особенность семейства all объекта document — оно всегда содержит ссылки на объекты HTML, HEAD, TITLE и BODY, даже если соответствующие теги отсутствуют в документе (браузеры обычно позволяют их пропускать и сразу же задавать тело документа). В семейство all объекта document не включается задаваемый без тегов разметки, хотя и отображаемый на странице, текст (браузер IE позволяет это делать). Таким образом, в объектной модели DHTML он будет просто потерян — к нему будет невозможен доступ. Кроме объектов, представляющих распознаваемые и отображаемые браузером элементы HTML, в семейства all и children попадают также комментарии HTML и неизвестные или ошибочные теги (без своего содержимого, которое отображается как неразмеченный текст). Для получения ссылки на интересующий объект, "хранящийся" в любом семействе, следует использовать целочисленный индекс (отсчет от нуля) или строковый индекс (имя) соответствующего элемента. Имя элемента HTML — значение его атрибута ID или атрибута NAME. Отметим, что имя элемента в то же время является свойством объекта-семейства, в которое он включен. 99 Например, чтобы обратиться к объекту, представляющему первый абзац приведенного в начале урока примера страницы HTML, можно использовать одну из следующих конструкций: document.all[4] document.all['p1'] document.all.p1 В Internet Explorer можно просто ссылаться на элемент HTML, используя его имя, определяемое значением атрибута ID или NAME, в качестве переменной, хранящей ссылку на объект, соответствующий указанному элементу HTML. Это справедливо для всех элементов страницы за исключением элементов управления формы — к ним доступ осуществляется только через родительский объект form (хотя с использованием семейства document.all придерживаться такой иерархии совершенно не обязательно). Таким образом, на первый абзац можно сослаться и просто как p1. При программировании достаточно полезным свойством семейств является свойство length, в котором хранится общее число объектов в наборе. Его обычно используют для организации перебора элементов в семействе с помощью цикла for. Однако в этом случае большую производительность и удобство дает цикл for...in. Пример 23. Два способа перебора элементов семейства |