События

Событие — это очень важное в программировании на JavaScript понятие. События главным образом порождаются пользователем, являются следствиями его действий. Если пользователь нажимает кнопку мыши, то происходит событие, которое называется Click. Если экранный указатель мыши движется по ссылке HTML-документа, происходит событие MouseOver.

Существует несколько различных событий. Пусть мы хотим, чтобы наша JavaScript программа реагировала на несколько разных событий. Это можно сделать при помощи event-handlers. Например, можно заставить появиться новое всплывающее окно, которое появляется при нажатии кнопки. Появление нового окна будет следствием наступления события Click. Event-handler, иначе говоря обработчик событий или средство управления событиями, который требуется для организации такого действия, называется onСlick. Это средство управления событиями сообщает компьютеру, какие действия необходимо совершить при наступлении данного события.

Задание:

Написать программу иллюстрирующую обработку события onСlick при нажатии на кнопку.

Выплнение:

1) создать HTML-документ;

2) поместить в тело документа следующие строки:

<form>

<input type="button" value="нажми на меня" onClick="alert('Ой-ой')">

</form>

3) сохранить HTML-документ;

4) проверить работу скрипта, открыв созданный HTML-документ в браузере.

Пояснение:

В результате выполнения Java-скрипта, при нажатии на кнопку, на экране должно появиться диалоговое окно с сообщением «Ой-ой».

Рисунок 1 – Результат выполнения скрипта.

В приведенном выше примере есть несколько новых моментов. Рассмотрим все подробно, шаг за шагом. В этом примере мы описали форму или бланк, в котором имеется кнопка. Это осуществляется при помощи инструкций HTML, и поэтому мы не будем на этом останавливаться. Для нас важной частью является инструкция onClick="alert('Ой-ой')", которая размещена внутри тега <input>. Как уже было замечено ранее, она определяет то действие, которое будет выполнено при нажатии кнопки. Если происходит событие Click, то компьютер выполнит инструкцию аlert('Ой-ой'). Эта инструкция — фрагмент JavaScript. Заметьте, что в этом случае мы не использовали тег <script>. Инструкция alert() позволяет создавать диалоговые окна. В скобках следует записать строку, в нашем случае это 'Ой-ой'. Текст строки будет виден в диалоговом окне.

Отметим маленькую деталь, которая, однако, может создать некоторые недоразумения. В команде document.write() мы писали двойные кавычки ", а в комбинации инструкций, содержащей alert(), мы используем одиночные кавычки ' — почему? Вообще говоря, можно пользоваться как теми, так и другими кавычками. В нашем последнем примере мы используем две пары кавычек и пишем onClick="alert('Ой-ой')". Но если мы напишем onClick=”alert(“Ой-ой”)”, то браузер не сможет определить, какая часть относится к onClick, а какая — нет.

Для того чтобы не возникали недоразумения такого рода, необходимо использовать разные типы кавычек, при этом нет никакой разницы, в каком порядке они будут применяться. Ту же формулу можно переписать в другом виде, поменяв кавычки местами: onClick='alert(“Ой-ой”)'.

Существует множество средств управления событиями. С некоторыми из них мы познакомимся далее, однако, не со всеми. Если у Вас появляется необходимость познакомиться с другими средствами управления событиями, обратитесь к справочным пособиям.