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

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

Имя обработчика начинается с приставки on, за которым следует имя самого события (о возможных событиях и их названиях см. в уроке 11):

onclick обработчик события click (щелчок мышью)

onmouseover обработчик события mouseover (наведение указателя мыши на элемент HTML)

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

< p onmouseover=" color(this)"

onmouseout=" color(this)"

onclick=" click++; myFunc(); " >... < /p>

Функция или процедура – это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение, определяемое операцией return (если такой операции в теле функции нет, то ее возвращаемым значением будет специальное значение undefined):

function имя_функции([параметры]) {

[операторы JavaScript]

[return значение]

}

Определение необходимых функций следует осуществлять в элементах SCRIPT, расположенных в элементе HEAD документа, так как они становятся доступными уже в начале обработки документа (содержимое элемента HEAD обрабатывается первым).

4Пример 3. Сценарий, вычисляющий время обработки документа

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

Для вычисления общего времени обработки документа в сценарии, расположенном в элементе HEAD, задается переменная tBegin, в которой хранится время начала обработки документа (не считая времени, ушедшего на обработку тега < HEAD> и самого тега < SCRIPT>).

Второй элемент SCRIPT подключает файл 3.js, в котором находится определение функции time(), возвращающей текущую дату. Эта функция вызывается в сценарии третьего элемента SCRIPT, расположенного в теле документа HTML (элемент BODY). В нем для отображения на странице полученной функцией time() даты используется метод write() объекта document обозревателя. Этот объект представляет всю загруженную в обозреватель страницу, и в момент ее формирования указанным методом можно " писать" на страницу все, что требуется. Однако после завершения обработки документа (при этом генерируется событие load объекта document) запись этим методом в документ приведет к тому, что в нем будет содержаться только то, что записано этим методом.

Для определения времени завершения обработки документа обозревателем используется упоминавшееся событие load и в обработчике события onload элемента BODY создается переменная tEnd, в которой и хранится время завершения обработки документа.

Для получения общего времени обработки документа по щелчку на кнопке выполняется код, определенный в ее обработчике события onclick, который вычисляет разность между временем, хранящемся в переменных tBegin и tEnd и отображает результат функцией alert().

< HEAD>

< SCRIPT LANGUAGE=" JavaScript" >

<! --

// Объявление переменной tBegin и инициализация ее

// объектом Date, содержащим текущие дату и время

var tBegin = new Date();

//-->

< /SCRIPT>

< SCRIPT SRC=3.js LANGUAGE=" JavaScript" > < /SCRIPT>

< /HEAD>

< BODY onload=" tEnd = new Date(); " >

< P> Начинается отображение страницы, в которую внедрен сценарий JavaScript.< /P>

< p> Следующая строка сгенерирована внедренным сценарием: < /p>

< hr>

< SCRIPT>

<! --

document.write(" < p> Сегодня < b> ", time(),

" < /b> < /p> ");

//-->

< /SCRIPT>

< hr>

< input type=button

onclick=" delta = tEnd.getTime()-tBegin.getTime();

s = 'Время обработки документа: \n'+delta+

' миллисекунд';

alert(s)"

value=" Время обработки документа" >

< /BODY>

Файл 3.js располагается в том же каталоге, что и файл документа HTML, и содержит следующий код JavaScript, определяющий функцию получения текущей даты в форме число.месяц.год.

// Определяем функцию, возвращающую текущую дату

function time() {

d = new Date();

return d.getDate()+"." +d.getMonth()+"." +d.getYear();

}