7.4.7.5. Создание скриптов обработчиков событий
Приложениями JavaScript в браузере мы в основном управляем событиями. События (Events)- это действия, которые происходят, обычно в результате чего - нибудь, что делает пользователь (например, щелчок кнопки мышки). Имеется определенный набор событий, которые браузер распознает. Вы можете определить обработчики результатов скриптов, которые автоматически выполняются, когда происходит результат.
Обработчик Результата записываются в документ как атрибут тега HTML, к которому вы приписываете код JavaScript, для выполнения. Общий вид: <TAG eventHandler="JavaScript Code">
Где TAG - это тег HTML, и eventHandler - имя обработчика результата.
Например, создали функцию JavaScript, и назвали ее compute. Вы можете заставить браузер выполнять эту функцию, когда пользователь нажимает на кнопку, в которой к onClick приписан обработчик результата кнопки:
<INPUT TYPE="button" VALUE="Calculate" onClick = "compute(this.form)">
Вы можете помещать любые утверждения JavaScript внутри кавычек onClick. Эти утверждения будут выполнены, когда пользователь нажмет на кнопку. Если Вы хотите включить больше чем одно утверждение, отдельные утверждения записываются через точкой с запятой (;).
В этом примере используется this.form, чтобы обратиться к текущей форме. Ключевое слово обращается к текущему объекту - в вышеупомянутом примере, объекту кнопки. Затем конструкция this.form обращается к форме, содержащей кнопку. Там же, onClick обработчик результата - запрос к функции compute(), с this.form, текущей формой, как параметр функции.
События обращаются к тегам HTML следующим образом:
События Focus, Blur, Change: text fields, textareas, и selections
События Щелчка: buttons, radio buttons, checkboxes, submit buttons, reset buttons, links
Событие Select: text fields, textareas
Событие MouseOver: links
Если события обращаются к тегам HTML, то для этого вы можете определять обработчик событий. Вообще, обработчик событий имеет имя события, предшествующее "on". Например, обработчик результата для результата Focus - onFocus.
Много объектов также имеют методы, которые подражают событиям. Например, кнопка имеет метод щелчка, который подражает нажимаемой кнопке. Заметьте: методы подражаемые событиям не вызывают обработчика событий. Так, например, метод щелчка не вызывает обработчика результата onClick. Однако, Вы можете всегда вызывать обработчик результата (например, Вы можете вызывать onClick явно в сценарие).
Таблица 1
Метод |
Происходит когда ... |
Обработчик Результата |
Blur |
Пользователь удаляет строку фокус из элемента формы |
OnBlur |
click |
Пользователь нажимает на элемент формы или link |
OnClick |
change |
Пользователь изменяет значение text, textarea, или select элемента |
OnChange |
Focus |
Пользователь передает фокус указанному элементу формы |
OnFocus |
load |
Пользователь загружает страницу в Navigator |
OnLoad |
Mouseover |
Происходит, когда пользователь помещает указатель мышки над гиперссылкой |
OnMouseOver |
Select |
Пользователь выделяет область ввода указанного элемента формы |
OnSelect |
Submit |
Пользователь подчиняет форму |
OnSubmit |
Unload |
Пользователь выходит из страницы |
OnUnload |
Приведем сценарий "калькулятор" с формой и атрибутом обработчика результата.
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
<META HTTP-EQUIV="Translator" CONTENT="Promt98 Translation System">
<SCRIPT LANGUAGE="JavaScript">
function compute(form) {
if (confirm("Вы уверены?"))
form.result.value = eval(form.expr.value)
else
alert("Please come back again.")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM> Введите выражение:
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
<BR>
Результат:
<INPUT TYPE="text" NAME="result" SIZE=15 >
<BR>
</FORM>
</BODY>
Рис. 4. Ввод выражения и нажатие кнопки “Calculate”
Рис. 5. Результат расчета выражения