разработка веб-сайтов под ключ
обучающие программы для веб-разработчиков

Одним из главных, но далеко не единственным, назначений сценариев в HTML-документе является обработка событий, таких как щелчок кнопкой мыши на элементе документа, помещение указателя мыши на элемент, перемещение указателя с элемента, нажатие клавиши и т. п. Большинство тегов HTML имеют специальные атрибуты, определяющие события, на которые могут отреагировать соответствующие элементы. Список всех допустимых событий довольно обширен и рассчитан практически на все случаи жизни. События называются довольно просто, особенно если вы знаете английский язык. Например, щелчок левой кнопкой мыши - onclick; изменение в поле ввода данных — onchange; событие onmouseover происходит, когда указатель мыши помещается на элемент HTML-документа. Список событий мы рассмотрим позже. Значением таких атрибутов-событий в тегах HTML является строка, содержащая сценарий, выполняющий роль обработчика события. Например, следующий HTML-код определяет заголовок второго уровня, который реагирует на щелчок кнопкой мыши тем, что выполняет некоторую функцию myfunc():

<h2 onclick = "myfuns()">Щелкни здесь</h2>

Определение функции myfunc() должно находиться в одном из контейнеров <script>,либо в файле, который должен быть вставлен в HTML-код документа с помощью тега <script>.

Для одного и того же элемента можно определить несколько событий, на которые он будет реагировать. Другими словами, для одного и того же тега можно указать несколько атрибутов-событий. Имена этих атрибутов, как и других, можно писать в любом регистре. Порядок следования атрибутов не имеет значения.
Итак, значением атрибута-события, как уже отмечалось, является код сценария, заключенный в кавычки. Этот сценарий называют также обработчиком события. В приведенном выше примере обработчиком события onclick является функция myfunc(). Если обработчик события содержит несколько выражений, то они разделяются точкой с запятой.

<h2 onclick = "var a = 5; a = a + myfunc () ">Щелкни здесь</h2>

Обычно обработчики событий оформляются в виде функций, определения которых помещают в контейнерный тег <script>.

Рассмотрим примеры оформления обработчика щелчка на заголовке, изображении кнопке.

В окне веб-браузера это будет выглядеть ТАК.

В приведенном примере обработчик событий onClick задается как значение атрибута-события <h2 onClick="alert('Привет!')"> и функции mystrim(), которая определена в контейнере <script>. В результате щелчка по заголовку, рисунку и кнопке выводится окно с сообщением. Если сценарий обработки события небольшой, то лучше использовать первый вариант, в других случаях второй, то есть оформление обработчика в виде функции.

Теперь рассмотрим еще один способ оформления обработчиков событий. Прежде всего, отметим, что почти для всех тегов HTML можно помимо прочих указать еще один атрибут — ID (идентификатор). Этот атрибут принимает любые строковые значения, которые играют роль индивидуальных имен элементов в их объектном представлении. Если атрибут ID в теге используется, то для задания обработчика события можно не использовать атрибуты-события. Вместо этого в контейнере <SCRIPT> достаточно написать определение функции обработчика события, имя которой образуется по следующему шаблону:

значение_ID.событие()

Обратите внимание на следующие два обстоятельства, важные только для рассмотренного выше способа оформления обработчиков событий:

• Элемент HTML-документа должен быть загружен раньше, чем функция-обработчик события.
  
• Составное имя функции-обработчика события содержит название события в нижнем регистре.

    

В окне веб-браузера это будет выглядеть ТАК.

Если требуется, чтобы сценарий обработал событие независимо от того, с каким элементом оно связано, то можно воспользоваться таким составным именем функции-обработчика:

function document. cобытие() {

   . . .

   }

Например:

 function document.onclick() {

   . . .

   }

Приведенных выше способов обработки событий (привязки обработчиков к элементам) вполне достаточно для практических нужд разработки веб-сайтов и других приложений. Однако следует упомянуть еще об одном способе, который применим для IE версии 4.0 и старше. Он основан на использовании атрибутов FOR и EVENT в теге <SCRIPT>.
Атрибуту FOR присваивается ссылка на объект, который должен реагировать на событие, а атрибуту EVENT присваивается название события. В качестве ссылки на объект обычно используется значение идентификатора объекта, то есть значение атрибута ID.

Рассмотрим пример.

В окне веб-браузера это будет выглядеть ТАК.

   Выражения в контейнере <SCRIPT> будут выполняться только при наступлении события, указанного в EVENT, которое связано с объектом, указанным в FOR. В приведенном выше примере при щелчке на кнопке (<BUTTON . . .>) будет выведено диалоговое окно с сообщением.
Рассмотренный выше способ позволяет не использовать атрибуты-события и указания обработчиков событий в тегах элементов. Однако при этом код сценария оказывается привязанным только к одному элементу. Чтобы использовать этот же код для других элементов, придется повторить его в секциях сценария (контейнерах <SCRIPT>), отдельно для каждого элемента.

В рассмотренных способах обработчики событий привязывались к специальным атрибутам тегов HTML – ID, атрибутам -событиям, FOR и EVENT. Сценарий-обработчик выполняется, если возникло событие, связанное с элементом, для которого был указан этот обработчик. Вместе с тем, возможно вызывать обработчик в сценарии просто как метод объекта. Он будет выполняться так же, как и при возникновении соответствующего события.

Рассмотрим пример.

В окне веб-браузера это будет выглядеть ТАК.

В данном примере сразу же после загрузки документа в браузер вызывается обработчик события onclick, связанный с кнопкой. Этот обработчик – функция mystrim(). Обратите внимание, что обработчик событий выполняется, несмотря на то, что щелчка не было.

Внимание. Выражение вызова метода onclick() должно записываться только строчными буквами.
Следует иметь ввиду, что рассмотренный выше способ использования обработчика как метода существенно отличается от эмуляции действия для события. Допустим, что имеется форма с несколькими полями для ввода данных, одно из которых имеет обработчик событий onfocus(активизация поля). Чтобы поле активировалось, необходимо щелкнуть по нему мышью или перейти к нему с помощью клавиатуры. При этом выполняется обработчик события onfocus. Даже если поле не активно, обработчик события onfocus все равно можно вызвать, но при этом поле не активируется:

document.имя_формы.имя_поля.onfocus()

Благодаря возможности использовать обработчик события в качестве метода объекта, допускается задавать обработчик в виде функции, имеющей название, совпадающее с названием события:

В окне веб-браузера это будет выглядеть ТАК.