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

В предыдущей главе демонстрировалась возможность интеграции JavaScript-кода через обработчики событий. Этот способ очень распространен на практике, поэтому более подробно разберемся с возможностями обработки событий.

Обработчик события можно прикрепить к любому элементу, который является наследником элемента body, а также к самому элементу body. Существует большой набор различных обработчиков, но мы рассмотрим лишь наиболее распространенные и практически значимые. В табл. 7.2 приводится список и объяснение назначения различных обработчиков.

Таблица 7.2. Обработчики событий

Обработчик	Событие
onclick	Клик по элменту
onmousedown	Нажата кнопка мыши
onmouseup	Отпущена кнопка мыши
onmouseover	Указатель мыши находится на элементе
onmouseout	Указатель мыши выходит за границы элемента
onload	Загрузка документа завершена
onfocus	Элемент получил фокус ввода
onblur	Элемент потерял фокус ввода
onchange	Элемент потерял фокус ввода и его значение с момента получения фокуса изменилось
onkeydown	Нажата клавиша
onkeypress	Клавиша нажата и отпущена
onkeyup	Клавиша отпущена

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

Для задания кода обработки события можно записать этот код в значение атрибута, имя которого совпадает с названием обработчика. При использовании такого способа всегда стремятся записывать наиболее компактный код, а если обработчик является сложным, то его оформляют в виде функции, а затем вызывают ее в обработчике. Ниже приведен пример такого приема.

<form action=“post”>

<div>

Имя: <input type="text" onfocus=“func();”/>

</div>

<div>

<input type="submit" onclick=“alert(‘OK’);”/>

</div>

</form>

Обработка событий без внедрения кода через атрибуты

В клиентском JavaScript существует парадигма ненавязчивого JavaScript, которая говорит, что HTML-документ вообще не должен содержать JS-кода. Это удобно: можно полностью отделить технологии представления от технологий клиентской обработки при этом сохранив их интеграцию.

Но как связать обработчик события с определенным элементом, если не через атрибут? В клиентском JS специально для работы с документом существует объектная модель DOM (Document Object Model). Она позволяет получить доступ к любому элементу документа. Благодаря такой возможности к элементам можно свободно добавлять любые атрибуты, не изменяя при этом HTML-код.

Для управления обработчиками событий существуют специальные методы. Для регистрации обработчика применяется метод addEventListener. Он принимает три аргумента. Первый — строка, хранящая в себе имя события. В отличие от названия атрибута в коде HTML имя события записывается без приставки on, например, если в HTML атрибут называется onclick, то в здесь нужно использовать строку “click”.

Второй аргумент принимает функцию-обработчик, которая вызывается при возникновении указанного события. В качестве аргумента этой функции передается объект Event, содержащий информацию о событии.

Третий аргумент — логическое значение, которое указывает должен ли данный обработчик перехватывать событие (обрабатывать его раньше своей очереди). Обычно это не требуется и в качестве значения аргумента указывается false.

Например, так можно привязать обработчик к событию загрузки документа:

window.addEventListener("load", init, false);

При этом функция init должна быть определена.

Для удаления обработчика существует метод removeEventListener(). Он принимает точно такой же набор аргументов как и addEventListener(). Например, для удаление обработчика, установленного в предыдущем примере, достаточно выполнить код:

window.removeEventListener("load", init, false);

Обратите внимание, что указываются все три аргумента. Это делается для точного определения «того самого обработчика». Например, две следующих строки регистрируют два разных обработчика события.

document.myform.addEventListener("submit", validate(e), false);

document.myform.addEventListener("submit", validate(e), true);

Для удаления этих обработчиков требуется два разных вызова removeEventListener().