- •4.2.1. Повторные и опущенные объявления
- •Типы данных
- •3.1.3. Литералы вещественных чисел
- •3.1.6. Специальные числовые значения
- •3.2.2. Управляющие последовательности в строковых литералах
- •3.3. Логические значения
- •3.4.1. Функциональные литералы
- •3.6. Массивы
- •7.6.1. Добавление новых элементов в массив
- •7.7.9. Методы toString() и toLocaleString()
- •7.7.10. Дополнительные методы массивов
- •11.1.2. Классы символов
- •11.1.3. Повторение
- •11.1.4. Альтернативы, группировка и ссылки
- •11.1.6. Флаги
- •1 Здесь функция alert() используется просто для отображения информации: она
- •13.2.2. Сценарии во внешних файлах
- •13.3. Обработчики событий в html
- •13.5.5. Объект Window как контекст исполнения
- •15.2. Свойства объекта Document
- •1 Модель dom может также использоваться для представления xmLдокументов,
- •15.4.2. Узлы
- •15.4.2.1. Типы узлов
- •1 Стандарт dom определяет интерфейсы, а не классы. Те, кто не знаком с термином
- •15.4.2.2. Атрибуты
- •15.5. Обход документа
- •1 Во многих сложных dhtmLэффектах используются также приемы обработки
- •16.1. Обзор css
- •1 Эрик Мейер «css – каскадные таблицы стилей. Подробное руководство», 3е из
- •16.1.1. Применение правил стиля к элементам документа
- •16.2.1. Ключ к dhtml: абсолютное позиционирование
- •16.2.3. Определение положения и размеров элемента
- •16.3.2. Работа со свойствами стилей
- •300 Пикселов:
- •17.1.1.1. Аппаратнозависимые и аппаратнонезависимые события
- •17.1.2. Обработчики событий как атрибуты
- •1 Подробное описание htmLформ, включая пример проверки правильности за
- •17.2.6.3. Интерфейс MouseEvent
- •17.5. События клавиатуры
- •17.5.1. Типы событий клавиатуры
- •17.5. События клавиатуры 441
16.3.2. Работа со свойствами стилей
При работе со свойствами стилей объекта CSS2Properties помните, что все значе
ния должны быть указаны в виде строк. В таблице стилей или атрибуте style
можно написать:
position: absolute; fontfamily: sansserif; backgroundcolor: #ffffff;
Чтобы сделать то же самое для элемента e в JavaScript, необходимо поместить
все эти значения в кавычки:
e.style.position = "absolute";
e.style.fontFamily = "sansserif";
e.style.backgroundColor = "#ffffff";
Обратите внимание, что точки с запятыми остаются вне строк. Это обычные точ
ки с запятой, употребляемые в синтаксисе языка JavaScript. Точки с запятой,
используемые в таблицах CSSстилей, не нужны в строковых значениях, уста
навливаемых с помощью JavaScript.
Кроме того, помните, что во всех свойствах позиционирования должны быть
указаны единицы измерения. Следовательно, нельзя устанавливать свойство
left подобным образом:
e.style.left = 300; // Неправильно: это число, а не строка
e.style.left = "300"; // Неправильно: отсутствуют единицы измерения
Единицы измерения обязательны при установке свойств стиля в JavaScript –
так же, как при установке атрибутов стиля в таблицах стилей. Далее приво
дится правильный способ установки значения свойства left элемента e равным
300 Пикселов:
e.style.left = "300px";
Чтобы установить свойство left равным вычисляемому значению, обязательно
добавьте единицы измерения в конце вычислений:
e.style.left = (x0 + left_margin + left_border + left_padding) + "px";
Как побочный эффект добавления единиц измерения, добавление строки преоб
разует вычисленное значение из числа в строку.
Объект CSS2Properties может также использоваться для получения значений
CSSатрибутов, явно установленных в атрибуте style элемента, или для чтения
любых встроенных значений стилей, ранее установленных JavaScriptкодом.
Однако и здесь необходимо помнить, что значения, полученные из этих свойств,
представляют собой строки, а не числа, поэтому следующий код (предполагаю
щий, что для элемента e с помощью встраиваемых стилей установлены поля) не
делает того, что от него, возможно, ожидалось:
var totalMarginWidth = e.style.marginLeft + e.style.marginRight;
А вот такой код будет работать правильно:
var totalMarginWidth = parseInt(e.style.marginLeft) +
parseInt(e.style.marginRight);
Это выражение просто отбрасывает спецификации единиц измерения, возвра
щаемые в конце обеих строк. В нем предполагается, что свойства marginLeft и mar16.3. Использование стилей в сценариях 389
ginRight заданы с одинаковыми единицами измерения. Если во встроенных сти
лях в качестве единиц измерения указаны исключительно пикселы, то, как пра
вило, можно обойтись простым отбрасыванием единиц измерения, как в данном
примере.
Вспомните, что некоторые CSSатрибуты, например margin, представляют собой
сокращения от других свойств, например margintop, marginright, marginbottom
и marginleft. Объект CSS2Properties имеет свойства, соответствующие этим сокра
щенным атрибутам. Так, можно установить свойство margin следующим образом:
e.style.margin = topMargin + "px " + rightMargin + "px " +
bottomMargin + "px " + leftMargin + "px";
Хотя возможно, комуто будет проще установить четыре свойства полей по от
дельности:
e.style.marginTop = topMargin + "px";
e.style.marginRight = rightMargin + "px";
e.style.marginBottom = bottomMargin + "px";
e.style.marginLeft = leftMargin + "px";
Можно также получить значения сокращенных свойств, но это редко имеет
смысл, поскольку обычно в этом случае приходится разбивать полученное зна
чение на отдельные компоненты. Как правило, это сделать сложно, в то время
как получить свойствакомпоненты по отдельности намного проще.
И наконец, позвольте мне снова подчеркнуть, что когда вы получаете объект
CSS2Properties через свойство style объекта HTMLElement, свойства этого объекта
представляют значения встроенных атрибутов стилей элемента. Другими слова
ми, установка одного из этих свойств эквивалентна установке CSSатрибута в ат
рибуте style элемента – она влияет только на данный элемент и имеет приоритет
над конфликтующими установками стилей из других источников в CSSкаска
де. Именно такое точное управление отдельными элементами и требуется при
создании DHTMLэффектов с помощью JavaScript.
Однако когда мы читаем значения этих свойств в CSS2Properties, они возвращают
осмысленные значения, только если были ранее установлены нашим JavaScript
кодом или если HTMLэлемент, с которым мы работаем, имеет встроенный атри
бут style, установивший нужное свойство. Например, документ может включать
таблицу стилей, устанавливающую левое поле для всех абзацев равным 30 пик
селов, но если прочитать свойство leftMargin одного из абзацных элементов, бу
дет получена пустая строка, если только этот абзац не имеет атрибута style, пе
реопределяющего значение, установленное таблицей стилей.
Поэтому несмотря на то, что объект CSS2Properties может использоваться для ус
тановки стилей, переопределяющих другие стили, он не позволяет запросить
CSSкаскад и определить полный набор стилей, применяемых к данному элемен
ту. В разделе 16.4 мы кратко рассмотрим метод getComputedStyle() и его альтерна
тиву в IE – свойство currentStyle, предоставляющие именно такую возможность.
17.1. Базовая обработка событий
В рассмотренных ранее примерах обработчики событий записывались в виде
строк JavaScriptкода, выступающих в качестве значений определенных HTML
атрибутов, таких как onclick. Это основа исходной модели обработки событий,
но есть некоторые дополнительные нюансы, требующие понимания и рассмот
ренные в следующих разделах.
17.1.1. События и типы событий
Различные типы происшествий генерируют различные типы событий. Наводя
мышь на гиперссылку и щелкая кнопкой мыши, пользователь вызывает собы
1 Броузер Netscape 4 также имел собственную, отличную от других и несовмести
мую модель обработки событий. Этот броузер в основном уже вышел из употреб
ления, по’тому его модель обработки событий в этой книге не рассматривается.
2 Хотя к моменту написания этих строк броузер IE 7 уже находился в стадии разра
ботки, у автора нет никакой информации о том, будет ли он поддерживать стан
дартную модель обработки событий.17.1. Базовая обработка событий 405
тия разных типов. Даже одно и то же происшествие может возбуждать различ
ные типы событий в зависимости от контекста, например, когда пользователь
щелкает на кнопке Submit, возникает событие, отличное от события, возникаю
щего при щелчке на кнопке Reset в форме.
В исходной модели обработки событий событие – это внутренняя абстракция для
вебброузера, и JavaScriptкод не может непосредственно манипулировать собы
тием. Говоря о типе события в исходной модели обработки событий, мы на самом
деле имеем в виду имя обработчика, вызываемого в ответ на событие. В этой мо
дели код обработки событий задается с помощью атрибутов HTMLэлементов
(и соответствующих свойств связанных с ними JavaScriptобъектов). Следова
тельно, если приложению требуется знать, что пользователь навел мышь на опре
деленную гиперссылку, то используется атрибут onmouseover тега <a>, определяю
щего эту гиперссылку. А если приложению требуется знать, что пользователь
щелкнул на кнопке Submit, используется атрибут onclick тега <input>, определяю
щего кнопку, или атрибут onsubmit элемента <form>, содержащего эту кнопку.
Имеется довольно много различных атрибутов обработчиков событий, которые
можно использовать в исходной модели обработки событий. Они перечислены
в табл. 17.1, где также указано, когда вызываются эти обработчики событий
и какие HTMLэлементы поддерживают атрибуты обработчиков.
В процессе развития клиентского JavaScriptпрограммирования развивалась
и поддерживаемая им модель обработки событий. В каждую новую версию бро
узера добавлялись новые атрибуты обработчиков событий. И наконец, специфи
кация HTML 4 закрепила стандартный набор атрибутов обработчиков событий
для HTMLтегов. В третьем столбце табл. 17.1 указано, какие HTMLэлементы
поддерживают каждый из атрибутов обработчиков событий. Для событий мыши
в третьей колонке указывается, что атрибут обработчика события поддерживает
большинство элементов. HTMLэлементы, которые не поддерживают данный
тип событий, обычно размещаются в разделе <head> документа или не имеют гра
фического представления. К элементам, не поддерживающим практически уни
версальные атрибуты обработчиков событий мыши, относятся <applet>, <bdo>,
<br>, <font>, <frame>, <frameset>, <head>, <html>, <iframe>, <isindex>, <meta> и <style>.
Таблица 17.1. Обработчики событий и поддерживающие их HTML'элементы
Обработчик Условия вызова Поддержка
onabort Прерывание загрузки изображения <img>
onblur Элемент теряет фокус ввода <button>, <input>, <label>,
<select>, <textarea>, <body>
onchange Элемент <select> или другой элемент поте
рял фокус и его значение с момента получе
ния фокуса изменилось
<input>, <select>, <tex
tarea>
onclick Была нажата и отпущена кнопка мыши;
следует за событием mouseup. Возвращает
false для отмены действия по умолчанию
(т. е. перехода по ссылке, очистки формы,
передачи данных)
Большинство элементов
ondblclick Двойной щелчок Большинство элементов406 Глава 17. События и обработка событий
Таблица 17.1 (продолжение)