Пакет Adobe GoLive
Обработка событий
В предыдущем разделе этой главы мы изучили список событий, присущий объектам document и window. Уже, исходя из их наименования и кратких описаний было ясно, что они инициируются при некоторых действиях пользователя или возникновении некоторых заранее определенных ситуаций. Любое действие, производимое при помощи программ-скриптов DHTML, может произойти только в ответ на некоторое событие, благо их перечень охватывает все мыслимые ситуации, возникающие при работе с Web-страницей. Рассмотрим простейший пример создания программы-скрипта, реагирующей на какой-либо событие. Например, при щелчке пользователя мышью на содержимом текстового абзаца, программа изменит цвет символов, которыми этот текст отображен. Для этого мы должны создать HTML-документ, код которого указан в следующем листинге.
Листинг 7. 1
<!bOCTYPE HTML PUBLIC "-//W3C7/DTD HTML 4. 01У/ЕЫМ
"http://www.w3.org/TR/html4/strict.cltcl">
<h.tjai>
<head>
<^1?1е>Иэменяемый «BeT</title> .
<scrif>t language»" javascript">
fuftotion changecolor ( ) ?
{pi. style. color-"blue";
.}.
" //">
</sc?ipt> </liead> .
<body>
<p id«»"pl" onClick-"ch,angecolor () "
font з1ге«5>Стррка TeKCTa</fontx/p>
</body> </html>
Этот маленький пример позволяет очень наглядно продемонстрировать основные
принципы работы DHTML (рис. 7.1). Начнем мы с правил внедрения скриптов
в HTML-документ.
Мы уже знаем, что скрипт должен размещаться в заголовке HTML-документа
между тегами <head> и </head>.
Сам код оформляется при помощи тегов ocript>
и </script>. Пропуск закрывающего тега
явяшся достаточно распространенной ошибкой начинающих разработчиков, поэтому
всегда следует осуществлять контроль присутствия закрывающих парных тегов.
В данном случае, если пропустить закрывающий тег, браузер будет считать
весь код, размещенный после тега <script>, программой и соответственно,
не будет отображать его,
Рис. 7.1. Внешний вид HTML-документа после работы программы-скрипта
Между дарой.тегов <script> размещен
код самой программы. Для того чтобы устаревшие версий браузеров, не поддерживающие
технологию программ-сценариев, не видели этот код, он обязательно оформляется
как комментарии.
Теперь ненадолго отвлечемся от кода программы и перейдем к рассмотрению
тела HTML-документа. Основным его элементом является один текстовый абзац,
объявленный при помощи тега <р>. В коде
листинга видно, что помимо самого тега мы использовали и дополнительные
параметры. Одним из них является идентифицирующий параметр id,
при помощи значения которого мы задаем уникальный идентификатор данного
элемента содержимого Web-страницы. Только при помощи этого уникального
идентификатора мы и смогли избирательно применить динамическое оформление
текста.
Также в состав открывающего тега <р> входит
дополнительный параметр, который мы не рассматривали в первой главе. Дело
в том, что официально в HTML не существует подобного параметра. В качестве
параметра мы записали наименование события, при возникновении которого
управление перейдет к программе-скрипту..Подобные способы записи событий
как параметров присущи именно технологии DHTML В качестве значения этого
параметра мы записали выполняемый код. В нашем случае это был всего лишьлызов
функции, которая была заранее определена в заголовке HTML-документа. Сама
функция в данном случае также была чрезвычайно проста. Мы использовали
всего лишь один оператор:
р1. style. со1ог="bluе" ;
Понятно, что левая часть оператора является .обращением к некоему объекту,
но при рассмотрении объектной иерархии нам не встречался объект с наименованием
"pi". Более того, очевидно, чтон связан с текстовым абзацем,
который имеет точно такой же идентификатор.
Дело в том, что в Состав объекта document входит неявный объект с общим
наименованием element. Объект мы называем "неявным",
-потому что в качестве него может использоваться любой, я подчеркиваю,
любой элемент Web-страницы, который создается при помощи какого-либо тега.
При этом наименование объекта будет совпадать с идентификатором искомого
элемента, т. е. соответствовать значению параметра
id.
Для того, чтобы изменить свойства отображения даняого элемента, мы использовали
объект style, являющийся дочерним по отношению к объекту element.
Этот объект позволяет использовать всю мощь стилевых таблиц без прямого
их создания. В коде Web-страницы мы не указали явно цвет шрифта, которым
отображается текст абзаца. Но в программе-скрипте мы применили свойство
color, которое позволяет регулировать цвет символов текста, и при выполнении
функции цвет шрифта был переопределен.
Следует обратить внимание, что действие скрипта было выполнено в ответ
на некое событие, порожденное действиями пользователя. Еще раз повторюсь,
что технология DHTML полностью ориентирована именно на события. Подобный
ставь, программирования обычно называют "событийно-ориентированным".
Именно поэтому для овладения технологией DHTML в, полной мере необходимо
досконально разбираться в принципах возникновения событий и их обработки.
Так же достойна внимания концепция "конвейера событий" в DHTML.
Суть этой концепции достаточно проста. Мы знаем, что в HTML одни элементы
могут находиться внутри других. Например, абзац, порождаемый тегами <р>
и </р>, может находиться .внутри ячейки
таблицы. Сами ячейки находятся внутри отдельных строк таблицы, а те, в
свою очередь, сами содержатся в таблице, порожденной тегами <table>
и </table>.
Теперь посмотрим, что произойдет, если пользователь произведет одиночный
щелчок мышью по этому абзацу. Абзац, естстественно, инициирует событие
onclick. Но ведь абзац находиться в ячейке,
следовательно, пользователь щелкнул и по ячейке. И сама ячейка тоже инициирует
событие onclick, а за ней точно также поступит
элемент строки таблицы и вся таблица. И так очередь дойдет до основного
элемента body.
При этом, если для всех или некоторых элементов, через которые прошло
это событие, были определены функции, выполняемые в ответ на щелчок мыши,
то они все будут выполнены. Если же разработчику необходимо обрабатывать
событие только в рамках того_ элемента, где оно произошло, не отправляя
вверх по объектной иерархий, следует воспользоваться одним из свойств
элемента event. Мы уже рассматривали этот объект и упоминали его свойство
canceisubbie, которое отменяет перемещение события вверх по объектной
иерархий. Поэтому, если бы мы в нашем скрипте захотели установить обработку
события только для одного элемента, прерывая передвижение события вверх
по объектной иерархии, наш скрипт выглядел бы следующим образом:
<script laguage="javascript">
function changecolor
{
(pi. style. color="blue" );
window. event , cance!Bubble
Txue;
</script>
Как видно, в этом случае мы лишь присвоили логическое значение "Истина"
данному свойству. Этого достаточно для того, чтобы отменить обработку
данного события всеми вышестоящими элементами. В предыдущем разделе мы
уже рассматривали струкутру объекта event «знаем, что даный объект при
помощи своих свойств предоставляет детальную информацию обо всех событиях,
которые входят в состав технологии DHTML.
Следует также упомянуть, что различные элемента! Web-страниц могут реагировать
на разные события. Возможный список событий определяется функциональностью
каждого конкретного элемента Web-страницы. Чтобы однозначно определить,
какой тег какими событиями обладает, приведем таблицу соответствий.
Таблица 7.2 Теги и события
| Тег
|
Описание
|
Список поддерживаемых событий
|
|
<а>
|
Гиперссылка
|
onblur, onclick,
ondblclick, ondragstart, onerrorupdate, onf interchange, onfocus,
onhelp, onkeydown, onkeyptess, onkeyup, onmousedown, onmousemove,
onmouseout, onmouseover, onmouseup, onselectstart
|
|
<address>
|
Специализированное форматирование текста
|
Onclick, ondblclick,
ondragstart, onhelp, bnkeydoWn, onkeypress, onkeyup, onmoaaedown,
onmousemove, onmouseout, onmouseover, onmouseup, onselectstart
|
|
<applet>
|
Внедряет в состав Web-страницы Java-апплет
|
Onafterupdate,
onbef oreupdate, onblur, onclick, ondataavailable, ondatasetelianged,
ondatasetcomplete, ondblclick, ondragstart, onerrorupdate, onfocus,
onhelp, orikeydowri, onkeypress, onkeyup, onload, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup, onreadystatechange,
onresize, onrdwenter, onrowexit, onselectstart
|
|
<area>
|
Создает активную область-гиперссылку в сегментированной
графике
|
onblur, onclick,
ondblclick, ondragstart, onfilterchange, onfocus, onhelp, onkeydown,
onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover,
onmouseup
|
|
<b>
|
Выделяет текст полужирным шрифтом
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, orikeydown, onkeypress t
onkeyup, onmousedown, onmousemove, onmouseout, onmouseover,
onmouseup, onselectstart
|
|
<big>
|
Увеличивает размер шрифта на единицу
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, .onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
|
|
<blockquote>
|
Специализированное форматирование текста
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<body>
|
Определяет содержательную часть Web-страницы
|
onafterupdate,
onbeforeupdate, onblur, onclick, ondblclick, ondragstarti onfocus,
onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove,
onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit»
onscroll, onselectstart
|
|
<button>
|
Создает кнопку
|
onafterupdate,
onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfilterchange,
onfocus, onhelp, onkeydown, onkeypieess, onkeyup, onmousedown,
onmousemove, onmbuseout, onmouseover, onmouseup, onresize, onrowenter,
onrowexit, onscroll, onselectstart
|
|
<caption>
|
Создает
заголовок таблицы |
i onafterupdate,
onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfilterchange,
onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown,
onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter,
onrowexit, onscroll, onselectstart
|
|
<center>
|
Центрирует блок содержимого
|
«ftelick,
onecibiclick, ondragstart, ®af ilterchange, ©iihelp,
onkeydown, Qnkeypress, onkeyup, onmousedown, onmousemove, onmouseout,
onmouseover, onmouseup, 'onselectstart
|
|
<cite>
|
Специализированное форматирование текста
|
onclick, ondl&cllck,
ondragstart, onfilterchange, оп&Цр, onkeydown, onkeypress,
onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<code>
|
Специализированное форматирование текста
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<dd>
|
Элемент списка
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
omaousedown, . onmousemove, onmouseout, onmouseover, onmotiseup,
onselectststtr й ' •
|
|
<dfn>
|
Специализированное форматирование текста
|
onclick, ondblclick,
ondragstart, ©lifilter change, onhelp, onkeydown, oakeypress,
onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<div>
|
Группировка элементов содержимого Web-страницы
|
onafterupdate,
onbeforeupdate, onblur, onclick, ondblclick, ondragstart, cuifojGus,
onhelp, onkeydown, onk®ypress, onkeyup, onmousedown, onmousemove,
onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit,
onscroll, onselectstart
|
|
<dl>
|
Создание списка
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<dt>
|
Создание элемента списка
|
onclick, ondblolick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
oninousedown, onmousemove, onmouseout, omnouseover, onmouseup,
onselect start
|
|
<em>
|
Специализированное форматирование текста
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<embed>
|
Внедрение в состав содержимого Web-страницы объектов
различных типов
|
onblur, onf
ocus
|
|
<font>
|
Определение шрифта для отображения текста
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<form>
|
Определяет форму в HTML-документе
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress,, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onreset, onselectstart, onsubmit
|
|
<hl>
— <h6>
|
Создают заголовки
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<hr>
|
Отображает горизонтальную линию
|
onbeforeupdatte,
onblur, onclick, ondblclick, ondragstart, onfilterchange, onhelp,
onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout,
onmouseover, onraouseup, onresize, onrowenter, on-rowexit, onselectstart
|
|
<i>
|
Выделяет текст курсивом
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<img>
|
Вставляет графическое изображение
|
onabort, onaf
terupdate, onbef oreupdate, onblur, onclick, ondblclick, ondragstart,
onerror, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress,
onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover,
onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart
|
|
<input>
|
Создает орган ввода информации
|
onaf terupdate,
onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onerrorupdate,
onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onresize, onselect, onselectstart
|
|
<kbd>
|
Специализированное форматирование текста
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<label>
|
Создает текстовую метку для некоторых органов
ввода информации
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<li>
|
Создает элемент списка
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<link>
|
Объявляет связь между различными HTML-документами
|
onerror, onload,
onreadystatechange
|
|
<listing>
|
Специализированное форматирование текста
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<map>
|
Создает карту сегментированной графики
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<object>
|
Внедряет какой-либо объект в HTML- доку мент
|
onafterupdate,
onbeforeupdate, onblur, onclick, ondataavailable, ondataset changed,
ondatasetcomplete, ondblclick, ondragstart, oneror, onerrorupdate,
onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onreadystatechange, onreset, onresize, onrowenter, onrowexit,
onselectstart
|
|
<ol>
|
Создает нумерованный список
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<P>
|
Задает текстовый абзац
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<plaintext>
|
Устанавливает специализированное форматирование
текста
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<pre>
|
Устанавливает специализированное форматирование
текста
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<s>
|
Отображает зачеркнутый текст
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<sup>
|
Устанавливает специализированное форматирование
текста
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
ons elect start
|
|
<table>
|
Создание таблицы
|
onaf terupdate,
onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfocus,
onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove,
onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit,
onscroll, onselectstart
|
|
<tbody>
|
Обозначает основной раздел таблицы
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<td>
|
Объявляет ячейку таблицы
|
onafterupdate,
onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onf
ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onresize, onrowenter, onrowexit, onselectstart
|
|
<textarea>
|
Создает многострочное поле текстового ввода
|
onafterupdate,
onbeforeupdate, onblur, onchange, onclick, ondblclick, ondragstart,
onerrorupdate, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress,
onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onresize, onrowenter, onrowexit, onscroll, onselect, onselectstart
|
|
<tfoot>
|
Создает нижнюю часть таблицы
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<th>
|
Объявляет строку заголовка таблицы
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<thead>
|
Создает область заголовка таблицы
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<tr>
|
Объявляет строку таблицы
|
onuf terupdate,
onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onf
ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onresize, onrowenter, onrowexit, onselectstart
|
|
<tt>
|
Устанавливает специализированное шрифтовое оформление
|
onclick, ondblclick,
ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<u>
|
Отображает подчеркнутый текст
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<ul>
|
Создает маркированный список
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
|
<var>
|
Устанавливает специализированное форматирование
текста
|
onclick, ondblclick,
ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onselectstart
|
Но иногда нам необходимо получить более детальную информацию о теку щей ситуации. При этом стандартных событий может быть мало. И здеа разработчик может воспользоваться объектом event. Его структуру мы уж( обсуждали в предыдущем разделе этой главы. Теперь мы можем на пример наглядно увидеть механизм использования этого элемента. Мы уже говори ли, что подавляющее большинство свойств этого объекта носят сугубо ин формативный характер, и потому доступны в режиме "только для чтения" Возможный способ работы с ними показан в листинге 7.2.
Листинг 7.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>06pa6oTKa co6biTMu</title> <script language^"javascript">
<!--
function info() {
s="'Координаты курсора мыши " + window.event.screenX + ","
+ window.event.screenY;
alert(s); }
window.document.ondblclick=info; //--> </script>
</head> <body>
<p><font з!ге=5>0бычная Web-CTpaHMua</fontx/p>
</body>
</html>
Разберем структуру приведенного скрипта. В самом начале программы мы объявляем функцию с наименованием info. После кода этой функции мы вставили строку следующего вида:
window.document.ondblclick=infо;
При помощи этой конструкции мы указываем, что функция info будет выполняться в том случае, если пользователь произведет двойной щелчок мышью в окне просмотра браузера. Так как мы не можем использовать для этих целей какой-либо тег содержимого Web-страницы, нам приходится использовать событие Объекта document.
Рис. 7.2. Окно браузера с результатом отображения файла, приведенного в листинге 7.2
Теперь рассмотрим механизм действия функции info.
Функция состоит из двух операторов. Первый из них присваивает переменной
некую строку, формируя ее из заданного текста и двух значений объекта
event, которые указывают координату курсора мыши в момент совершения пользвателем
двойного щелчка (рис. 7.2). Второй оператор при помощи ключевого слова
alert отображает модальное окно с текстом, который является значением
переменной из первого оператора.
Мы увидели в действии основные механизмы обработки событий в DHTML. Теперь
мы можем создавать свои программы-скрипты, ориентированные на работу с
событиями, возникающими при работе пользователя с нашими HTML-документами.
Однако мы знаем, какие события соответствуют тому или иному объекту, но
мы указали смысл далеко не для всех возможных событий. Пришло время это
сделать. В табл. 7.3 перечислены все события, используемые в технологии
DHTML, и ситуации, в которых они инициируются.
Таблица 7.3. События в DHTML
| Событие
|
Описание
|
|
onabort
|
Инициируется, когда пользователь принудительно
прерывает загрузку данных
|
|
onaf terupdate
|
Возникает при окончании передачи данных
|
|
onbeforeunload
|
Инициируется перед выгрузкой страницы
|
|
onblur
|
Утеря фокуса ввода объектом
|
|
onchange
|
Инициируется при изменении содержимого объекта
|
|
onclick
|
Происходит при одиночном щелчке мыши на объекте
|
|
ondataa vail able
|
Инициируется при получении данных из источника
|
|
ondataset changed
|
Возникает при изменении набора данных, на основе
которого функционирует элемент
|
|
ondataset complete
|
Инициируется в тот момент, когда исходый набор
данных становится полностью доступным для документа
|
|
ondblclick
|
Возникает при выполнении пользователем двойного
щелчка мыши на элементе
|
|
ondragstart
|
Возникает в тот момент, когда пользователь начинает
перетаскивать объект при помощи мыши
|
|
onerror
|
Инициируется в случае возникновения ошибки при
передаче данных
|
|
one rr or update
|
Возникает при отмене изменения данных
|
|
onf ilterchange
|
Возникает при изменении состояния графического
фильтра
|
|
onf ilterevent
|
Инициируется при окончании этапа действия графического
фильтра
|
|
onfocus
|
Возникает при получении объектом фокуса ввода
|
|
onhelp
|
Возникает в тот момент, когда пользователь нажимает
клавишу <F1>
|
|
onkeydown
|
Инициируется при нажатии пользователем какой--
либо клавиши на клавиатуре
|
|
onkeypress
|
Инициируется при нажатии клавиши и ее удержании
в нажатом положении
|
|
onkeyup
|
Возникает, когда пользователь отпускает нажатую
клавишу
|
|
onload
|
Инициируется, когда загрузка объекта полностью
завершается
|
|
onmousedown
|
Возникает, когда пользователь нажимает кнопку
мыши
|
|
onmousemove
|
Возникает, когла пользователь перемещает мышь
|
|
onmouseout
|
Инициируется в тот момент, когда пользователь
уводит курсор мыши с пространства, занимаемого объектом
|
|
onmouseover
|
Инициируется в тот момент, когда пользователь
перемещает курсор мыши в пространство, занимаемое объектом
|
|
onmouseup
|
Возникает, когда пользователь отпускает ранее
нажатую кнопку мыши
|
|
onreadystatechange
|
Возникает при изменении свойства readystate
|
|
onreset
|
Возникает при нажатии пользователем на кнопку
Reset, расположенную на форме
|
|
onresize
|
Инициируется в тот момент, когда пользователь
изменяет размеры окна просмотра
|
|
onrowenter
|
Инициируется при изменении данных в строке, связанной
с внешним источником данных
|
|
onrowexit
|
Инициируется перед тем, как данные в строке будут
изменены источником данных
|
|
onscroll
|
Возникает, когда пользователь прокручивает содержимое
Web-страницы в окне просмотра браузера
|
|
onselect
|
Возникает при изменении текущей выделенной области
|
|
onselectstart
|
Инициируется, когда пользователь начинает выделять
область содержимого
|
|
onsubmit
|
Инициируется, когда пользователь нажимает на
кнопку Submit, расположенную на форме, и отсылает данные из формы
на сервер
|
|
onunload
|
Инициируется непосредственно перед выгрузкой
страницы из окна просмотра браузера
|
Теперь, когда мы знаем, какие события соответствуют различным элементам Web-страницы, и в каких ситуациях эти события возникают, единственное, чего нам не хватает для того, чтобы создавать действительно разветвленные и гибкие программы-сценарии, — это то, какие свойства и методы присущи различным элементам Web-страниц. Об этом мы узнаем в следующем разделе.
|