Wiki-учебник по веб-технологиям: JavaScript/ОпределениеОбработчикаСобытия ...

Главная | |

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


Оглавление документа

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


Вы определяете обработчик события (функцию или серию операторов 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:

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

В форме, показанной на следующем рисунке, Вы можете ввести выражение (например, 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.

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

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


<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.