Вы определяете обработчик события (функцию или серию операторов JavaScript) для обработки события. Если событие применяется к HTML-тэгу (то есть событие применяется к JavaScript-объекту, созданному из этого тэга), то Вы можете определить для него обработчик события. Имя обработчика это имя события с префиксом on. Например, обработчик для события focus называется onFocus.
Для создания обработчика события для тэга HTML добавьте атрибут обработчика события в этот тэг. Поместите код JavaScript в кавычки как значение атрибута. Общий синтаксис таков:
<TAG eventHandler="JavaScript Code">
где TAG это тэг HTML, eventHandler это имя обработчика события, а JavaScript Code это последовательность операторов JavaScript.
Например, Вы создали JavaScript-функцию compute. Вы выполняете вызов Navigator'ом этой функции, когда пользователь щёлкает кнопку, назначив вызов функции обработчику onClick кнопки:
Вы можете указать любые операторы JavaScript в качестве значения атрибута onClick. Эти операторы выполняются, если пользователь щёлкает по кнопке. При включении нескольких операторов разделяйте их символом (;).
В предыдущем примере this.form ссылается на текущую форму. Ключевое слово this ссылается на текущий объект, которым в данном случае является кнопка. Конструкция this.form, следовательно, ссылается на форму, содержащую кнопку. Обработчик onClick это вызов функции compute с текущей формой в качестве аргумента.
Если Вы создаёте обработчик события, соответствующий объект JavaScript получает свойство с именем обработчика события. Это свойство даёт Вам доступ к обработчику события данного объекта. Например, в предыдущем примере JavaScript создаёт объект Button со свойством onclick, значением которого является «compute(this.form)".
Не забывайте чередовать двойные и одинарные кавычки. Поскольку обработчик события в HTML обязан быть заключён в кавычки, Вы обязаны использовать одинарные кавычки как ограничители строковых аргументов. Например:
Вообще хорошей практикой может стать определение функции для обработчика события вместо использования нескольких операторов 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). Функция JavaScripteval вычисляет свой аргумент, который может быть любой строкой, представляющей любые выражение или операторы JavaScript.
Если пользователь нажал Cancel, confirm возвращает false, и метод alert выводит другое сообщение.
На форме имеется кнопка с обработчиком onClick, в котором вызывается функция compute. Когда пользователь щёлкает кнопку, JavaScript вызывает compute с аргументом this.form, который означает текущий Form-объект. В compute на this.form делается ссылка как на аргумент f.
1.2. Вызов обработчиков событий явным образом
Руководствуйтесь следующими указаниями при вызове обработчиков событий.
Вы можете устанавливать обработчик, специфицированный в HTML, как показано здесь в примерах.
JavaScript 1.0. Вы не можете устанавливать обработчик события.
Обработчики событий являются ссылками на функции, поэтому Вы обязаны присвоить fun2 самой себе, а не fun2() (второй вариант вызывает fun2 и содержит любые тип и значение, возвращаемые функцией fun2).
Поскольку HTML-атрибуты обработчика события являются литеральными телами функций, Вы не можете использовать <INPUT onClick=fun1> в HTML, чтобы назначить fun1 обработчику onClick. Вместо этого, Вы обязаны установить значение в JavaScript, как в предыдущем примере.
JavaScript 1.1 и предыдущие версии. Вы обязаны вводить имена обработчиков символами нижнего регистра, например, myForm.onsubmit или myButton.onclick.