- •Часть 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
- •Перемещение по объектной модели
- •Изменение объектной модели документа
- •Упражнения
Вызов процедуры обработки события
В JavaScript каждое событие порождает ассоциированный с ним объект event. Этот объект содержит всю информацию о событии и его можно передать процедуре обработки события.
Вызов процедуры обработки события можно осуществить двумя способами:
явно – назначив ссылку на процедуру обработки события в соответствующем свойстве объекта
неявно – в атрибуте обработки события тега соответствующего элемента
Каждый объект JavaScript, создаваемый для элементов документа HTML, имеет свойства, ассоциированные с возможными событиями, которые могут быть сгенерированы для этого элемента. Присвоив этому свойству в качестве значения ссылку на процедуру обработки события, мы и определим процедуру, которая будет вызываться при возникновении соответствующего события. Например, следующий код определяет процедуру showEventType как процедуру обработки события mousedown кнопки формы:
<FORM NAME="form1">
<INPUT TYPE="button" NAME="button1" VALUE="Узнай событие">
<SCRIPT>
document.form1.button.onmousedown = showEventType
</SCRIPT>
</FORM>
Сама процедура задается следующим кодом (объект event в IE доступен просто по своему имени):
// В IE
function showEventType() {
alert("Произошло событие: " + event.type)
}
Второй, неявный вызов процедуры обработки события требует задания обращения к ней в атрибуте onmousedown в открывающем теге элемента INPUT:
<FORM NAME="form1">
<INPUT TYPE="button" NAME="button1" VALUE="Узнай событие"
onmousedown = "showEventType()" >
</FORM>
Событийная модель
Любое событие имеет свой "жизненный" цикл: от момента возникновения действия или условия, являющегося причиной генерирования события, до выполнения последнего оператора обработчика события или финальных действий браузера. Цикл жизни любого типичного события JavaScript включает следующие этапы:
Происходит действие пользователя или возникает условие, которое возбуждает событие
Тотчас же корректируется объект event, чтобы отразить параметры возникшего события
Событие генерируется – это и есть истинное сообщение о возникшем событии
Вызывается обработчик событий элемента-источника события, который выполняет определенные программистом действия и завершает свою работу
Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта-источника события. Это "всплытие" вверх по иерархии объектов продолжается, пока не будет достигнут самый верхний объект иерархии – объект window, или обработчик события какого-либо объекта не аннулирует событие
Выполняются заключительные действия по умолчанию, если таковые определены, но при условии, что событие не было аннулировано.
Пример 19. "Всплытие" события
В этом примере щелчок на любом элементе HTML страницы приводит к отображению диалогового окна с надписью "Не надо щелкать".
<HTML>
<HEAD><TITLE>"Всплытие" события</TITLE>
</HEAD>
<BODY ID='body' onclick="alert('Не надо щелкать!');" >
<H1 ID='head1'>Привет!</H1>
<P ID='parag1'>Это простой пример, <B ID='bold1'>ну очень простой</B> пример.
</BODY>
</HTML>
Возникнув, событие начинает подниматься вверх по иерархии вложенных объектов HTML. Например, если щелчок произошел на элементе bold1, то путь "всплытия" события будет bold1, parag1 и body. Причем для каждого из указанных элементов JavaScript будет просматривать наличие атрибута onclick и выполнять действия, предопределенные его значением. В нашем случае такой атрибут задан только для родителя body, а поэтому только заданный в нем код и будет выполняться при щелчке на любом элементе или просто в теле документа.
Если к какому-нибудь элементу добавить собственный обработчик событий onclick, то будут выполнены две процедуры: самого элемента и элемента родителя. Если элемент расположен достаточно глубоко в иерархии объектов, и каждый элемент, расположенный выше него, имеет также собственный обработчик событий, то событие будет обрабатываться всеми обработчиками, если только в каком-то обработчике не будет аннулировано его "всплытие" вверх по иерархии объектов.
Объект event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным true. После этого соответствующее событие не существует, и обработчики этого события всех, расположенных выше элементов, не вызываются.
Пример 20. Аннулирование "всплытия" события
Аннулирование "всплытия" события в элементе bold1 приводит к тому, что щелчок на нем не отображает диалогового окна из обработчика этого события в элементе body. Для всех остальных элементов это действие продолжает выполняться.
<HTML>
<HEAD><TITLE>Аннулирование события</TITLE>
</HEAD>
<BODY ID='body' onclick="alert('Не надо щелкать!');" >
<H1 ID='head1'>Привет!</H1>
<P ID='parag1'>Это простой пример,
<B ID='bold1' onclick="window.event.cancelBubble=true" >ну очень простой</B> пример.
</BODY>
</HTML>