- •Часть I. Язык сценариев JavaScript 3
- •Часть II. Среда клиента 73
- •Часть III. Динамический html 95
- •Клиентское Web-программирование
- •Часть I. Язык сценариев JavaScript Урок 1. Модель клиент-сервер в Интернете Распределенные системы и приложения
- •Http-запрос
- •Http-ответ
- •Урок 2. Сценарии JavaScript в документах html Языки сценариев
- •Язык JavaScript
- •Основные положения синтаксиса
- •Размещение операторов языка на странице
- •Упражнения
- •Урок 3. Переменные и литералы
- •Числовой тип
- •Строковый тип
- •Булевый тип
- •Специальные типы данных
- •Переменные
- •Определение типа переменной
- •Упражнения
- •Урок 4. Выражения и операции
- •Арифметические операции
- •Логические выражения
- •Строковые операции
- •Комбинированные операции присваивания
- •Условная операция
- •Приоритет операций
- •Упражнения
- •Урок 5. Операторы
- •Операторы выбора
- •Операторы цикла
- •Упражнения
- •Урок 6. Функции
- •Упражнения
- •Урок 7. Встроенные объекты (1)
- •Объект Array
- •Объект Date
- •Объект Math
- •Объект String
- •Объект Function
- •Объект Boolean
- •Объект Number
- •Упражнения
- •Урок 8 Встроенные объекты (2) Объект Object
- •Стандартные функции верхнего уровня (объект Global)
- •Манипулирование объектами
- •Обработка ошибок
- •Упражнения
- •Урок 9. Создание собственных объектов
- •Упражнения
- •Часть II. Среда клиента Урок 10. Объектная модель ms Internet Explorer
- •Объект window
- •Объект navigator
- •Объект location
- •Объект history
- •Упражнения
- •Урок 11. Объекты доступа к странице и ее элементам Объект document
- •Объект body
- •Объект form
- •Упражнения
- •Урок 12. Обработка событий в ms Internet Explorer Обработчики событий
- •Вызов процедуры обработки события
- •Событийная модель
- •Объект event (ie)
- •Упражнения
- •Часть III. Динамический html Урок 13. Объектная модель документа dhtml
- •Структура документа
- •Иерархия объектов
- •Свойства и методы объектов
- •Упражнения
- •Урок 14. Примеры динамических страниц html Раскрывающийся список
- •Движущийся элемент
- •Динамическое изменение таблиц
- •Родственные отношения
- •Упражнения
- •Урок 15. Объектная модель документа dom
- •Узлы объектной модели dom
- •Перемещение по объектной модели
- •Изменение объектной модели документа
- •Упражнения
Объект event (ie)
Объект event создается автоматически всякий раз, когда возникает какое-либо событие. Этот объект не зависит от используемого языка создания сценария, и его использование в процедурах обработки событий для получения информации о сгенерированном событии является предпочтительным способом получения достоверной информации о событии.
Каждое событие характеризуется параметрами, которые передаются в сценарий через свойства объекта event. Существуют параметры, общие для всех типов событий (например, координаты курсора мыши в окне браузера) и специфические для определенного события (например, код нажатой клавиши для событий клавиатуры). Свойства объекта event, как и сам он, являются динамическими и создаются в зависимости от типа произошедшего события. При описании свойства, если не оговорено противное, подразумевается, что оно является общим для всех типов событий.
Свойство type хранит строку с названием происшедшего события: mousedown, load, click и т. д.
Свойство srcElement определяет элемент документа, явившийся источником события. Оно может быть полезным при централизованной обработке событий элементом, расположенным выше в иерархии объектов документа истинного "виновника" события, и, в зависимости от типа элемента, программа-обработчик может предпринять соответствующие действия.
Важное свойство cancelBubble, аннулирующее событие и прекращающее передачу его на обработку вверх по иерархии объектов, рассмотрено ранее.
Свойство returnValue является булевым и возвращает значение true или false после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии значение этого свойства можно использовать для альтернативной обработки события. Кроме того, если в обработчике события элемента, для которого определены действия по умолчанию, это свойство устанавливается равным false, то это отменяет выполнение действий по умолчанию. Так, для элемента A действием по умолчанию является переход по ссылке, задаваемой атрибутом HREF.
По значениям свойств altKey, ctrlKey и shiftKey элемента-источника события определяется, была ли нажата, соответственно, клавиша <Alt>, <Ctrl> или <Shift> в момент возникновения события (правая или левая неважно). Значение свойства равно true, если клавиша была нажата, и false в противном случае. Свойства ctrlLeft, altLeft и shiftLeft позволяют определить, была ли нажата в момент возникновения события левая из указанных в названии свойств клавиша.
Следующий фрагмент сценария отменяет переход по любой связи в документе, если при щелчке на ней была нажата клавиша <Shift>:
Пример 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 являются координатами относительно элемента-контейнера, в котором расположен элемент-источник события, screenX и screenY – абсолютные координаты курсора мыши, т.е. координаты экрана монитора. Все значения этих свойств определены в пикселях.
Свойства x и y определяют положение курсора мыши по горизонтали и вертикали относительно позиционированного контейнера, содержащего элемент-источник события. Если ни один контейнер не позиционирован, то положение определяется относительно тела документа <BODY>.
Полезное свойство событий мыши 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), и увеличение (поворот колесика "на себя") или уменьшение (поворот колесика "от себя") значения свойства zoom элемента IMG на 5%, что приводит к увеличению или уменьшению размеров рисунка.
<HTML>
<HEAD>
<SCRIPT>
var count = 100;
function picture()
{
if (event.wheelDelta <= -120)
count += 5;
else if (event.wheelDelta >= 120)
count -= count <= 10 ? 0 : 5;
event.srcElement.style.zoom = count + "%";
window.status= event.srcElement.style.zoom;
}
</SCRIPT>
</HEAD>
<BODY>
<img src="sample.jpg" onmousewheel="picture()" width="100">
</BODY>
</HTML>