Роль обработчика событий в JavaScript

Роль обработчика событий в JavaScript

Как вы знаете программы HTML выполняются в строго указанном порядке. Порядок выполнения программы изменяется только при возникновении определенного события. События - это действия, происходящие в браузере - щелчки мышью, нажатия клавиш, перемещение указателя мыши, загрузка рисунка и т.п. Самые различные события могут повлиять на дальнейшее поведение браузера.

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

Объекты и события

Как вы уже знаете для сохранения разных типов данных используют объекты. Объекты используются и для управления различными элементами браузера: кнопками, ссылками, рисунками, окнами и т.п. Событие может произойти в любом из элементов браузера и документа HTML. Например, пользователь может щелкнуть на одной из нескольких ссылок на странице, связанных со своим объектом.

Каждое событие имеет собственное имя. Например, событие onMouseOver происходит при наведении указателя мыши на объект вэб-страницы. При наведении указателя на соответствующую ссылку событие onMouseOver активизируется и запускается обработчик этого события.

Чтобы определить обработчик событий, в начало имени события добавляется ключевое слово on. Например, обработчик событий onMouseOver вызывается при наведении указателя мыши на ссылку.

Создание обработчика событий

Для определения события не нужно использовать дескриптор SCRIPT. Наоборот, обработчик событий вставляется в дескриптор HTML. Вот каким образом задается обработчик событий onMouseOver:

<A HREF="http://www.site.com" onMouseOver="window.alert('Нажмете и уйдете');"> Ссылка</A>

Этот оператор позволяет выводить сообщение на экран при наведении указателя мыши на ссылку.

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

<A HREF="#bottom" onMouseOver="Dolt();">Ссылка</A>

В этом примере при наведении пользователем указателя на ссылку вместо обработчика событий вызывается функция Dolt(). Использование функции предпочтительнее, поскольку в ней вы можете задавать более сложные операторы, нежели в обработчике событий.

В простых обработчиках событий можно использовать два оператора, разделив их точкой с запятой. Тем не менее, в большинстве случаев проще использовать функцию.

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

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

Чтобы определить обработчик событий таким образом, сначала определите функцию, а затем назначьте ее в качестве обработчика событий. Обработчик событий может сохраняться в виде свойства объекта document или другого объекта, который поддерживает события. В приведенном ниже примере определяется функция mousealert, а затем назначается как обработчик событий onMouseDown:

function mousealert() { alert("Вы щелкнули кнопкой!"); } document.onMouseDown = mousealert;

Использование объекта event

Объект event используется в JavaScript версии 1.2 и выше. Это специальный объект, который отправляется в обработчик событий при возникновении любого события. Обработчик события получает этот объект в виде параметра. Свойства объекта event содержат данные о событии, которое произошло. Ниже приведен список всех свойств объекта event.

type - Это тип произошедшего события, например mouseover.

target - Это целевой объект события (например, документ или ссылка).

which - Это числовое значение, определяющее номер кнопки мыши или клавишу клавиатуры, которая была нажата.

modifiers - Это список модифицирующих клавиш, используемых для возбуждения события (например Alt, Shift, Ctrl).

data - Это список перемещаемых данных в событиях "перетащи и отпусти".

pageX и pageY - Это координаты указателя мыши вдоль оси X и Y соответственно. Начало координат находится в левом верхнем углу страницы.

layerX и layerY - Это координаты указателя мыши вдоль оси X и Y соответственно. Начало координат находится в левом верхнем углу слоя.

screenX и screenY - Это координаты указателя мыши вдоль оси X и Y соответственно. Начало координат находится в левом верхнем углу экрана.

События связанные с мышью

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

В и ИЗ

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

onMouseOut - это противоположный обработчик. Он вызывается при удалении указателя мыши из необходимой области. При вызове этого обработчика событий всегда выполняются определенные действия (иначе зачем тогда его использовать).

Этот обработчик часто используется тогда, когда сценарий предусматривает добавление на вэб-страницу ссылок и других объектов, на которые пользователь обязательно наводит указатель мыши. С помощью обработчика onMouseOver вы можете, при наведении указателя на объект, выполнять дополнительные действия - отображать сообщения в строке состояния или загружать рисунок. При необходимости отмените (с помощью обработчика onMouseOut) все проведенные вами действия после перемещения указателя мыши с указанного объекта.

Чаще всего обработчики onMouseOver и onMouseOut используются для создания изменяющихся при наведении на них указателей рисунков.

Третий обработчик событий onMouseMove вызывается при произвольном перемещении указателя мыши. Поскольку пользователь постоянно перемещает указатель мыши, по умолчанию этот обработчик не активен. Чтобы активизировать его, используйте метод захвата события, описанный далее.

Щелчки и отпускания

Обработчики событий также позволяют определять нажатия и отпускания кнопок мыши. Основной обработчик событий, который используется для этого, - onClick. Этот обработчик вызывается после щелчка мышью при наведенном указателе мыши на определенный объект.

Объект в этом случае выступает в роли ссылки. Это может быть и элемент формы.

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

<A HREF="http://site.net" onClick="alert('Вот так нажал');">Нажми сюда</A>

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

Если обработчик событий onClick возвращает значение false, то страница, на которую указывает ссылка, загружаться не будет. Ниже приведен пример задания условной ссылки, которая позволяет загружать страницу только после выполнения дополнительных действий. Если вы щелкните на кнопке Cancel (Отмена), страница загружена не будет, если щелкнуть на кнопке OK, страница загрузится так же, как и при использовании обычной ссылки:

<A HREF="http://site.net" onClick="return(window.confirm('Уверены?'));">Щелкните здесь</A>

В этом примере используется функция return, определяющая поведение обработчика событий. Она возвращает значение false после щелчка на кнопке Cancel. В этом случае документ загружен не будет.

Обработчик событий onDblClick выполняется подобным образом. Единственная разница состоит в том, что анализируется не одиночный щелчок на объекте, а двойной. Поскольку на ссылке обычно выполняется одинарный щелчок, вы можете использовать один объект для задания двух разных ссылок. Одна ссылка будет активизироваться при двойном щелчке на объекте, а вторая - при одинарном. (Честно говоря этот метод неэффективен из-за частых ошибок пользователей). Двойной щелчок регистрируется не только на ссылке, но и на рисунке и другом объекте документа.

onMouseDown - используется для определения нажатия пользователем кнопки мыши.

onMouseUp - используется для определения отпускания нажатой кнопки мыши.

Если вы хотите определить щелчок, то используйте onClick, если же только нажатие или отпускание - onMouseDown или onMouseUp.

Для определения используемой кнопки мыши объект событий имеет свойство which. Для левой кнопки мыши это свойство равно 1, а для правой - 3. Это свойство определяется как для onClick, onDblClick, так и для onMouseDown и onMouseUp.

В приведенном ниже примере создан обработчик событий onMouseDown, отображающий разные предупреждения при нажатии разных кнопок мыши:

function mousealert(e) { whichone = (e.which == 1) ? "левой" : "правой"; message = "Вы нажали на "+ whichone + " кнопке"; alert(message); } document.onmousedown = mousealert;

События, связанные с клавишами

До выпуска Netscape Navigator 4.0 язык JavaScript не имел средств определения нажатия клавиш на клавиатуре. Это не позволяло создавать много полезных программ. Например, сложно было создавать игры, не без возможности использовать клавиши со стрелками.

Именно поэтому последние версии JavaScript позволяют определять нажатие клавиш. Основной обработчик событий, который используется для этого, - onKeyPress. Он вызывается при нажатии и отпускании клавиши. Как и в случае с кнопками мыши, нажатие и отпускание клавиш мыши отдельно определяется обработчиками onKeyDown и onKeyUp.

Конечно, необходимо знать, какая клавиша нажимается. Это определяется с помощью объекта event. Свойство event.which точно указывает на нажимаемую клавишу - оно принимает значение кода ASCII этой клавиши.

Если вы предпочитаете использовать реальные символы, то преобразуйте код с помощью метода fromCharCode в реальные символы. Этот метод преобразует код ASCII в соответствующие символы клавиш. Например следующий дескриптор BODY содержит обработчик событий, отображающий символ клавиши, нажимаемой пользователем:

<BODY onKeyPress="window.alert('Вы нажали: ' + String.fromCharCode(event.which));">

Этот оператор использует метод String.fromCharCode для преобразования свойства event.which в строковое значение, которое отображается как часть сообщения.

Cобытие onLoad

Еще одно событие, на которое нельзя не обратить внимание, - это onLoad. Это событие происходит после окончания загрузки вэб-страницы (включая и все рисунки).

Событие onLoad связано с объектом document. Чтобы определить его соответствующий обработчик события задается в дескрипторе BODY. Следующий дескриптор BODY использует простой обработчик собитый для отображения сообщения по окончании загрузки страницы:

<BODY onLoad="alert('Загрузка завершена');">

Поскольку событие onLoad происходит после загрузки и отображения документа HTML, в его обработчике нельзя использовать операторы document.write и document.open. Если их использовать, то текущий документ будет удален и замещен другим.

JavaScript имеет много других событий. Многие из них используются при создании форм ввода данных. О них мы поговорим позже. Еще одно событие, которое неплохо бы знать, это onError. Оно позволяет предотвратить отображение на экране сообщения об ошибке. О нем также позже.

Добавление описания ссылки

Чаще всего обработчики событий используются для отображения в строке состояния описания ссылки при наведении на нее указателя мыши.

Описания, отображаемые в строке состояния, обычно отображаются с помощью обработчика событий onMouseOver. Создадим сценарий, отображающий подобные сообщения. Удаление сообщения будет проводиться при снятии указателя мыши со ссылки. Для упрощения сценария будем использовать функцию.

При добавлении сообщений, созданных описанным выше образом, они замещают в строке состояния адрес URL. Поэтому убедитесь, что ваши сообщения больше полезны для пользователя, нежели адрес URL. Как правило, вэб-мастера используют этот метод для отображения многословных сообщений. Например, ссылка на форму заказа товаров может иметь сообщение "Переход к форме заказа необходимых товаров".

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

<A HREF="order.htm" onMouseOver="window.status='Заказ товаров'; return true;">Order Form</A>

В этом примере оператор return true используется для предотвращения замещения создаваемого сообщения адресом URL. Как вы видите, дескриптор A при таком задании сообщения достаточно сложен - ввести сообщение и то не хватает места.

Использование функции немного упрощает программный код. Но самое главное, это позволяет добавлять в будущем другие объекты (например, рисунки). В нашем примере функция которая будет вызываться для отображения сообщения наз. describe.


<SCRIPT LANGUAGE="JavaScript">
function describe(text) {
     window.status = text;
     return true;
}
</SCRIPT>

Эта функция имеет всего один параметр text. Содержимое переменной отображается в строке состояния. Поскольку функция возвращает значение true, строка состояния продолжает отображать сообщение вместо адреса URL. Чтобы удалить сообщение, необходимо создать простую функцию, вызываемую обработчиком событий onMouseOut, показанную ниже.


function clearstatus() {
       window.status="";
}

И конечно, документ HTML должен содержать ссылки с соответствующими обработчиками событий, позволяющими вызывать приведенные выше функции. Листинг 21.1 содержит программный код документа HTML c тремя типичными ссылками.

Листинг 21.1. Пример страницы с тремя ссылками


1:    <HTML>
2:    <HEAD>
3:    <TITLE>Описание ссылок</TITLE>
4:    <SCRIPT LANGUAGE="JavaScript">
5:    function describe(text) {
6:         window.status = text;
7:         return true;
8:    }
9:    function clearstatus() {
10:        window.status="";
11:   }
12:   </SCRIPT>
13:   </HEAD>
14:   <BODY>
15:   <H1>Описание ссылок</H1>
16:   <P>Наведите указатель на ссылки, чтобы
17:   отобразить их описания.</P>
18:   <UL>
19:   <LI><A HREF="order.htm"
20:             onMouseOver="describe('Заказать товар'); return true;"
21:             onMouseOut="clearstatus()";>
22:   Заказ товаров</A>
23:   <LI><A HREF="email.htm"
24:             onMouseOver="describe('Отправить письмо'); return true;"
25:             onMouseOut="clearstatus()";>
26:   Email</A>
27:   <LI><A HREF="complain.htm"
28:             onMouseOver="describe('Оставить отзыв'); return true;"
29:             onMouseOut="clearstatus()";>
30:   Отдел защиты прав потребителей</A>
31:   </UL>
32:   </BODY>
33:   </HTML>

В этом примере функции создаются в заголовке документа. Каждая ссылка имеет обработчики событий onMouseOver и onMouseOut, вызывающих две определенные раньше функции.

Протестируйте сценарий в браузере.