Мобильная версия

Электронная библиотека

Программисту веб-дизайнеру

Другие материалы

Клиентский JavaScript. Руководство по Использованию

Глава 10
Обработка Событий

Приложения JavaScript в браузере Navigator широко используют механизм обработки событий. Events\События это акции, которые обычно возникают как результат некоторых действий пользователя. Например, щелчок по кнопке является событием, также как и изменение текста или перемещение мыши над гиперссылкой. Чтобы Ваш скрипт реагировал на события, Вы определяете event handlers\обработчики событий, такие как onChange и onClick.

В главе имеются следующие разделы:

Об обработке событий см. дополнительно статью Getting Ready for JavaScript 1.2 Events в онлайновом View Source magazine. Также JavaScript technical notes содержат информацию о программировании событий.

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

Таблица 10.1  Обработчики Событий JavaScript

Abort

изображениям

пользователь прерывает загрузку изображения (например, щелкну гиперссылку или кнопку Stop)

onAbort

Blur

окнам и всем элементам формы

пользователь убирает фокус ввода с окна или элемента формы

onBlur

Change

текстовым полям, спискам select

пользователь изменяет значение элемента

onChange

Click

кнопкам, radio-кнопкам, переключателям/checkboxes, кнопкам submit и reset, гиперссылкам

пользователь щелкает по элементу формы или кнопке

onClick

DragDrop

окнам

пользователь "отпускает" мышью объект в окне браузера, как при перемещении файлов

onDragDrop

Error

изображениям, окнам

загрузка документа или изображения вызвала ошибку

onError

Focus

окнам и всем элементам формы

пользователь передает фокус окну или элементу формы

onFocus

KeyDown

документам, изображениям, гиперссылкам, текстовым полям

пользователь нажал клавишу клавиатуры

onKeyDown

KeyPress

документам, изображениям, гиперссылкам, текстовым полям

пользователь нажал или (?) удерживает нажатой клавишу клавиатуры

onKeyPress

KeyUp

документам, изображениям, гиперссылкам, текстовым полям

пользователь отпустил клавишу клавиатуры

onKeyUp

Load

телу документа

пользователь загружает страницу в Navigator

onLoad

MouseDown

документам, кнопкам, гиперссылкам

пользователь нажал клавишу мыши

onMouseDown

MouseMove

по умолчанию - ни к чему

пользователь перемещает курсор

onMouseMove

MouseOut

областям, гиперссылкам

пользователь перемещает курсор за пределы клиентской карты изображений или гиперссылки

onMouseOut

MouseOver

гиперссылкам

пользователь перемещает курсор над гиперссылкой

onMouseOver

MouseUp

документам, кнопкам, гиперссылкам

пользователь отпускает клавишу мыши

onMouseUp

Move

окнам

пользователь или скрипт перемещает окно

onMove

Reset

формам

пользователь восстанавливает начальные значения формы (щелкает кнопку Reset)

onReset

Resize

окнам

пользователь или скрипт изменяет размер окна

onResize

Select

текстовым полям

пользователь выделяет поле ввода элемента формы

onSelect

Submit

формам

пользователь отправляет форму

onSubmit

Unload

телу документа

пользователь покидает страницу

onUnload

Определение обработчика события

Вы определяете обработчик события (функцию или серию операторов JavaScript) для обработки события. Если событие применяется к HTML-тэгу (то есть событие применяется к JavaScript-объекту, созданному из этого тэга), то Вы можете определить для него обработчик события. Имя обработчика это имя события с префиксом "on." Например, обработчик для события focus называется onFocus.

Для создания обработчика события для тэга HTML добавьте атрибут обработчика события в этот тэг. Поместите код JavaScript в кавычки как значение атрибута. Общий синтаксис таков:

<TAG eventHandler="JavaScript Code">

где TAG это тэг HTML, eventHandler это имя обработчика события, а JavaScript Code это последовательность операторов JavaScript.

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

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">

Вы можете указать любые операторы JavaScript в качестве значения атрибута onClick. Эти операторы выполняются, если пользователь щелкает по кнопке. При включении нескольких операторов разделяйте их символом (;).

В предыдущем примере this.form ссылается на текущую форму. Ключевое слово this ссылается на текущий объект, которым в данном случае является кнопка. Конструкция this.form, следовательно, ссылается на форму, содержащую кнопку. Обработчик onClick это вызов функции compute с текущей формой в качестве аргумента.

Если Вы создаете обработчик события, соответствующий объект JavaScript получает свойство с именем обработчика события. Это свойство дает Вам доступ к обработчику события данного объекта. Например, в предыдущем примере JavaScript создает объект Button со свойством onclick, значением которого является "compute(this.form)".

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

<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"
onClick="window.open('mydoc.html', 'newWin')">

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

Пример: использование обработчика события

В форме, показанной на следующем рисунке, Вы можете ввести выражение (например, 2+2) в первое текстовое поле, а затем щелкнуть кнопку. Во втором поле будет выведено значение выражения (в данном случае, 4).

Рисунок 10.1   Форма с обработчиком события

Скрипт для этой формы таков:

<HEAD>
<SCRIPT>
<!-- Скрываем от старых браузеров
function compute(f) {
if (confirm("Are уou sure?"))
   f.result.value = eval(f.expr.value)
else
   alert("Please come back again.")
}
// конец скрытия -->
</SCRIPT>
</HEAD>

<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
<BR>
Result:
<INPUT TYPE="text" NAME="result" SIZE=15 >
</FORM>
</BODY>

HEAD/шапка документа определяет функцию compute, принимающую один аргумент, f, который является Form-объектом. Эта функция использует метод window.confirm для отображения диалога Confirm с кнопками OK и Cancel.

Если пользователь щелкает OK, confirm возвращает true, а значением текстового поля result становится значение eval(f.expr.value). Функция JavaScript eval вычисляет свой аргумент, который может быть любой строкой, представляющей любые выражение или операторы JavaScript.

Если пользователь нажал Cancel, confirm возвращает false, и метод alert выводит другое сообщение.

На форме имеется кнопка с обработчиком onClick, в котором вызывается функция compute. Когда пользователь щелкает кнопку, JavaScript вызывает compute с аргументом this.form, который означает текущий Form-объект. В compute на this.form делается ссылка как на аргумент f.

Вызов обработчиков событий явным образом

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

<SCRIPT LANGUAGE="JavaScript">
function fun1() {
...
}
function fun2() {
...
}
</SCRIPT>

<FORM NAME="myForm">
<INPUT TYPE="button" NAME="myButton"
onClick="fun1()">
</FORM>

<SCRIPT>
document.myForm.myButton.onclick=fun2
</SCRIPT>

JavaScript 1.0. Вы не можете устанавливать обработчик события.

JavaScript 1.1 и предыдущие версии. Вы обязаны вводить имена обработчиков символами нижнего регистра, например, myForm.onsubmit или myButton.onclick.

Объект Event

Каждое событие имеет ассоциированный объект event. Объект event предоставляет информацию о событии, такую как тип события и положение курсора в момент возникновения события. Когда событие возникает, и если обработчик был написан для обработки этого события, объект event отправляется обработчику как аргумент.

В случае с событием MouseDown, например, объект event содержит тип события ("MouseDown"), координаты x и y позиции курсора мыши в момент возникновения события, число - используемую кнопку мыши и поле, содержащее клавиши-модификаторы (Control, Alt, Meta или Shift), которые были нажаты в момент события. Свойства объекта event различаются для разных типов событий, как описано в книге Клиентский JavaScript. Справочник.

JavaScript 1.1 и предыдущие версии. Объект event недоступен.

Захват событий

Обычно событие обрабатывается объектом, в котором это событие возникает. Например, если пользователь щелкает по кнопке, вызывается обработчик этого события. Иногда Вам может понадобиться, чтобы объект window или document обрабатывал определенные события. Например, Вам может понадобиться, чтобы объект document обрабатывал все события MouseDown вне зависимости от того, в каком месте документа они возникают.

Модель захвата событий JavaScript дает возможность определять методы, которые захватывают и обрабатывают события, до того как они достигнут своей предполагаемой цели. Для этого объекты window, document и layer используют следующие методы:

JavaScript 1.1 и предыдущие версии. Захват событий невозможен.

Как пример, предположим, Вы хотите захватить все события Click, возникающие в окне. В сжатом виде, шаги по захвату событий таковы:

В последующих разделах эти шаги поясняются.

Включение захвата событий

Для настройки захвата окном всех событий Click используйте примерно такой оператор:

window.captureEvents(Event.CLICK);

Аргументом свойства captureEvents объекта event является тип захватываемого события. Для захвата нескольких типов событий, аргументом является список с разделением символом (|). Например, следующий оператор захватывает события Click, MouseDown и MouseUp:

window.captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP)

ПРИМЕЧАНИЕ: Если окно с фрэймами должно захватывать события на страницах, загружаемых с различных серверов, Вам необходимо использовать captureEvents в маркированном скрипте и вызывать enableExternalCapture. О маркированных скриптах см. Главу 14 "Безопасность в JavaScript".

Определение Обработчика События

Далее определяется функция, обрабатывающая событие. Аргумент e это event-объект события.

function clickHandler(e) {

   //Здесь идет обработка события.
//Процесс описан ниже.
}

У Вас имеются следующие опции для обработки события:

function clickHandler(e) {
   return true;
}

function clickHandler(e) {
   return false;
}

function clickHandler(e) {
   var retval = routeEvent(e);
   if (retval == false) return false;
   else return true;
}

function clickHandler(e) {
   window.document.links[0].handleEvent(e);
}

window.onClick = clickHandler;

<HTML>
<SCRIPT>

function fun1(e) {
alert ("The window got an event of type: " + e.type + 
   " and will call routeEvent.");
window.routeEvent(e);
alert ("The window returned from routeEvent.");
return true;
}

function fun2(e) {
alert ("The document got an event of type: " + e.type);
return false;
}

function setWindowCapture() {
window.captureEvents(Event.CLICK);
}

function releaseWindowCapture() {
window.releaseEvents(Event.CLICK);
}

function setDocCapture() {
document.captureEvents(Event.CLICK);
}

function releaseDocCapture() {
document.releaseEvents(Event.CLICK);
}

window.onclick=fun1;
document.onclick=fun2;

</SCRIPT>
...
</HTML>

В общем, Вам понадобится проверять ввод как минимум в двух случаях:

Страница JavaScript на сайте DevEdge содержит ссылки на примеры кода. Одна из этих ссылок - это полный набор функций для проверки данных формы.
В следующем разделе даны некоторые простые примеры, но посмотрите также примеры на сайте DevEdge.

Пример проверяющих функций

Вот примеры простых проверяющих функций:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function isaPosNum(s) {
return (parseInt(s) > 0)
}

function qty_check(item, min, max) {
var returnVal = false
if (!isaPosNum(item.value)) 
   alert("Please enter a positive number")
else if (parseInt(item.value) < min) 
   alert("Please enter a " + item.name + " greater than " + min)
else if (parseInt(item.value) > max) 
   alert("Please enter a " + item.name + " less than " + max)
else 
   returnVal = true
return returnVal
}

function validateAndSubmit(theform) {
if (qty_check(theform.quantity, 0, 999)) {
   alert("Order has been Submitted")
   return true
}
else {
   alert("Sorry, Order Cannot Be Submitted!")
   return false
}
}
</SCRIPT>
</HEAD>

isaPosNum это простая функция, которая возвращает true, если ее аргумент - положительное число, и false - в ином случае.

qty_check принимает три аргумента: объект, соответствующий проверяемому элементу формы (item), и минимальное и максимальное допустимые значения для item (min и max). Она проверяет, является ли item числом в диапазоне от min до max, и выводит диалог alert, если это не так.

validateAndSubmit принимает в качестве аргумента Form-объект; она использует qty_check для проверки значения элемента формы и отправляет форму, если ввод верен. В ином случае она выводит окно alert и не отправляет форму.

Использование проверяющих функций

В следующем примере тэг BODY документа использует qty_check как обработчик onChange для текстового поля и validateAndSubmit - как обработчик onClick для кнопки.

<BODY>
<FORM NAME="widget_order" ACTION="lwapp.html" METHOD="post">
How many widgets today? 
<INPUT TYPE="text" NAME="quantity" onChange="qty_check(this, 0, 999)">
<BR> 
<INPUT TYPE="button" VALUE="Enter Order" onClick="validateAndSubmit(this.form)">
</FORM>
</BODY>

Эта форма отправляет значения на страницу lwapp.html приложения серверного JavaScript. Можно также отправить форму CGI-программе. Форма показана на рисунке.

Рисунок 10.2  Форма JavaScript

Обработчик onChange включается, если Вы измените значение в текстовом поле и переместите фокус с этого поля, нажав клавишу Tab клавиатуры компьютера или щелкнув мышью вне этого текстового поля. Обратите внимание, что оба обработчика используют ключевое слово this для представления текущего объекта: в текстовом поле оно используется для передачи объекта JavaScript, соответствующего текстовому полю, функции qty_check, а в кнопке - для передачи JavaScript-объекта Form функции validateAndSubmit.

Для отправки формы серверной программе в этом примере используется кнопка, которая вызывает validateAndSubmit, проверяющую форму, с использование метода submit, если данные верны. Вы можете также использовать submit-кнопку (определенную тэгом <INPUT TYPE="submit">) и поместить на форму обработчик onSubmit, который возвращает false, если введены неправильные данные. Например,

<FORM NAME="widget_order" ACTION="lwapp.html" METHOD="post" 
onSubmit="return qty_check(theform.quantity, 0, 999)">
...
<INPUT TYPE="submit">
...
</FORM>

Если qty_check возвращает false (если данные неверны), обработчик onSubmit запретит отправку формы.

Оглавление | Назад | Вперед | Индекс

Мобильная версия

Сайт для компьютера
http://www.mat.net.ua