Обработка событий

В предыдущем разделе этой главы мы изучили список событий, присущий объектам 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-страниц. Об этом мы узнаем в следующем разделе.