События

Браузер умеет отслеживать действия пользователя и реагировать на них. Это хорошо известно. Если щелчок мыши в окне приходится по ссылке, браузер загружает новый документ. Комбинация клавиш < Alt> +< > возвращает прежнее содержимое окна.

Если пользователь подводит курсор мыши к картинке, браузер тут же отображает в небольшом окошке alt-текст из соответствующего тега < img>. Пользователь использует клавиши со стрелками, и браузер послушно прокручивает окно.

Эти наблюдения показывают: мышь и клавиатура «информируют» браузер о том, что с ними делает пользователь. Браузер следит за загрузкой документа. Если не загрузилась картинка (нет на диске, оборвалась связь с сервером), он замещается прямоугольником.

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

Вот обычная кнопка, которую браузер рисует при помощи HTML-кода (рис. 5):

< FORM>

< INPUT type=button value=" Oбычная кропка" >

< /FORM>

Рис. 5. Обычная кнопка

Кнопка задана тегом < input> внутри тега-формы < form>...< /form>. Атри­бут value задает надпись на кнопке, а атрибут type описывает тип поля ввода.

Браузер реагирует на нажатие этой кнопки, при этом он ее перери­совывает, создавая впечатление, что кнопка вдавливается мышью в экран. Но больше ничего не происходит.

Если выполнить сл. команды, то реакция будет по-другому (рис. 6):

< FORM>

< INPUT type=button value=" Кнопка с секретом"

onclick=" alert('Привет! ')" >

< /FORM>

Рис. 6. Кнопка с секретом

На экране появляется окно alert с текстом «Привет!» (рис. 6). Сообщение выводится по нажатию на кнопку с секретом. В теге < input> появился новый атрибут onclick. В качестве значения атрибута в кавычках записана небольшая про­грамма на JavaScript: " alert('Привет! ')".

Атрибут onclick сообщает браузеру, что надо делать, когда кнопка нажата! Посмотрите следующую программу.

< SCRIPT language=JavaScript>

<! --

function Fun ()

{

var now = new Date ();

alert(" Сегодня: " +now.getDate()+" /" +

(now.getMonth()+1)+" /" + now.getYear() +

" \nСейчас: " +now.getHours()+": " +now.getMinutes());

}

< /SCRIPT>

< FORM>

< INPUT type=button value=Календарь onclick=" Fun(); " >

< /FORM>

На рис. 7 изображена кнопка, созданная с помощью приведенного выше HTML-кода.

Рис. 7.Кнопка Календарь

Рис. 8.Сообщение выводится по нажатию на кнопку Календарь

В этом примере в атрибуте onclick задано короткое обращение к функции Fun(), а сама функция описана обычным образом в блоке < script>...< /script>. Если теперь нажать на кнопку Календарь, на экране появится сообщение, показанное на рис. 8.

Функция Fun(), которая работает при возникновении события onclick — (щелчок) на кнопке, называется обработчиком этого события.