Cобытия в JavaScript

Написанные на JavaScript сценарии могут реагировать на действия пользователя и другие внешние события. Каждое из событий связано с тем или иным объектом: формой, гипертекстовой ссылкой или даже окном, содержащим текущий документ.

В качестве примеров внешних событий, на которые могут реагировать объекты JavaScript, можно привести следующие.

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

Имя обработчика определяет, какое событие он должен обрабатывать. Так, для того чтобы сценарий должным образом отреагировал на щелчок мышью, используется обработчик с именем onClick, для обработки события, заключающегося в получении фокуса ввода,- обработчик onFocus, а после окончания загрузки документа вступает в действие обработчик onLoad.

Иногда события называются именами их обработчиков. Так, вместо "событие , обрабатываемое обработчиком onFocus", встречается выражение "событие onFocus".

Для того, чтобы указать интерпритатору JavaScript на то, что обработкой события должен заниматься обработчик, созданный вами, надо включить в HTML- дескриптор следующее выражение:

имя_обработчика = "команды_обработчика"

Это выражение включается в дескриптор, формирующий объект, с которым связано событие. Если вы захотите самостоятельно обрабатывать событие, заключающееся в получении фокуса полем ввода, дескриптор описывающий этот интерактивный элемент, должен иметь приблизительно следующий вид:

<INPUT TYPE = "TEXT" NAME = Inform" onFocus = "handle();">

Как видите, имя обработчика является одним из атрибутов HTML-дескриптора, а команды, предназначенные для обработки события, выступают в роли значения этого атрибута. В данном случае обработка события производится в теле функции handle(). Однако для обработки совсем не обязательно вызывать ту или иную функцию. Обработчиком может быть любая последовательность команд JavaScript.

Рассмотрим несколько примеров с использованием событий.

Команда onMouseOver


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>События </title>
</head>

<body>
<a href="http://sevidi.narod.ru/" onMouseOver="window.status='Сайт о сайтах'; return true">Ссылка</a>
</body>
</html>

Из обработчиков событий мы выбрали onMouseOver (навести мышь).

В окне веб-браузера это будет выглядеть ТАК.

 Наведите курсор на ссылку и посмотрите на строку состояния в окне браузера. Она отразит словосочетание Сайт о сайтах.

Разберем этот скрипт.

Во-первых, onMouseOver (обратите внимание на заглавные буквы) представляет собой обработчик событий гипертекстовой ссылки и используется внутри гиперссылки.
Формат ссылки остается без изменений. Те же команды и те же двойные кавычки. onMouseOver ставится сразу же после URL адреса.
Событие приводится в действие, когда браузер распознает onMouseOver="". Схема уже должна казаться вам немного знакомой: два элемента, разделенных точкой. До сих пор это означало, что один является объектом, а другой методом. Но не в этом случае. Объектом является window (окно), оно существует; status (статус) представляет собой property (свойство) oкна. Это небольшой участок окна, где должен разместиться следующий текст. Это проще запомнить, если представить, что метод обычно выражается глаголом, как write (писать) или get (получить). Свойство выражается существительным и существует как небольшая часть элемента, стоящего перед точкой.
Если у window есть изменяемое свойство status, значит, можно изменить и другие свойства окна.
После window.status следует знак равенства = и то, что должно произойти. В данном случае это текст в одинарных кавычках. Он появится в строке состояния, когда вы наведете курсор на ссылку.
Обратите внимание на точку с запятой в конце строки.

return true - эти два слова имеют не последнее значение. Они дают скрипту указание проверить, есть ли строка состояния. Если отчет (return) соответствует действительности (true), тогда происходит событие. Обратите внимание, что текст в строке состояния уже не изменяется и не изменится, сколько раз вы не наводили бы на нее курсор.

Вернемся к свойствам. Если они есть у окна, другие объекты тоже должны их иметь. Давайте рассмотрим фон - одно из свойств страницы. В HTML цветом фона страницы управляет команда BGCOLOR. То же самое и здесь, только обязательно соблюдайте регистр. В JavaScript он пишется bgColor. Подумаем, как создать ссылку. которая изменяла бы фон страницы с помощью обработчика onMouseOver.

  1. Во-первых, раз это ссылка, то сохраним ту же схему, которой сегодня уже пользовались.
  2. Что мы меняем, окно или документ? Куда идет команда bgColor, когда вы пишете веб-страницу? В документ. Значит, это и есть нужный нам объект. Заменим window на document.
  3. Мы собираемся менять фоновый цвет объекта, потому заменим status на bgColor.
  4. Больше нам текст не нужен, так что заменим его цветом. Возьмем зеленый.
  5. Нам нужно, чтобы новый цвет оставался независимо от того, сколько раз мы будем наводить курсор на ссылку, потому вставляем return true после точки с запятой.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body>
<a href="http://sevidi.narod.ru" onMouseOver="document.bgColor='gren';
return true">Не щелкать</a>
</body>
</html>

Должно получиться ТАК.

При наведение курсора на ссылку Не щелкать документ получает зеленый цвет.

И так, что мы можем изменить еще.

Вернем документe первоначальный цвет.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body>

<a href="http://sevidi.narod.ru" onMouseOver="document.bgColor='white', onMouseOver=window.status='Сайт о сайтах';
return true">Не щелкать</a>
</body>
</html>

Должно получиться ТАК.

Давайте применим новый метод, alert() (предупредить). Он вызывает небольшое диалоговое окно с текстом и кнопкой OK. Попробуйте сделать так, чтобы окно предупреждения всплывало при наведении курсора на ссылку. Вот формат команды:

alert('текст в окошке')

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body>
<a href="http://sevidi.narod.ru" onMouseOver="alert('До встречи!'), onMouseOver=document.bgColor='white', onMouseOver=window.status='Сайт о сайтах'; return true">Жми сюда</a>
</body>
</html>

Должно получиться ТАК.

Команда onClick(на щелчок)

Вы уже знаете, что onMouseOver запускает событие, если навести курсор на ссылку. Следовательно, щелкнув по ссылке, можно с таким же успехом запустить событие через onClick.
Чтобы продемонстрировать действие команды, я воспользуюсь методом alert, который мы уже использовали в предыдущем примере.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body>
<a href="http://sevidi.narod.ru/" onClick="alert('Уже уходите!');">Жми сюда</a>
</body>
</html>

Должно получиться ТАК.

Нажав на ссылку, появится небольшое диалоговое окно с текстом и кнопкой OK.

Команда onFocus (на фокус)

Эта команда, которая вызывает действие, когда пользователь «фокусируется» на элементе страницы. Это годится для форм: флажков (checkbox) и текстовых полей (textbox).

Рассмотрим пример.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body>
<form>
<input type="text" size="30"
onFocus="window.status='Текст в строке состояния';">
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Щелкните в поле ввода и посмотрите на строку состояния.

Команда onBlur (на потерю фокуса)

Если можно сосредоточиться на объекте, значит, можно и «потерять фокус». оnBlur позволяет сообщить пользователю о том, что он изменил свой ответ. Этот обработчик не так часто используется, но вот вам пример. Внизу у меня строка для ввода текста, в которой уже что-то написано.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body>
<form>
<input type="text" size="45" value="Впишите свое имя и щелкните по другой строке"
onBlur="alert('Вы изменили ответ — уверены, что он правильный?');">
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Измените текст и уведите курсор, как если бы вы перешли к следующему предмету в списке и вы увидите небольшое диалоговое окно с вопросом: Вы изменили ответ — уверены, что он правильный?"

Команда onChange (на изменение)

Действие этой команды очень похоже на действие предыдущей, onBlur. Ее главная задача — проверка. Этот обработчик события проверяет, сделал ли пользователь то, что вы от него просили. Пример очень похож на предыдущий, но действует все-таки по-другому.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body>
<form>
<input TYPE="text" size="45"
value="Измените текст и щелкните по другой строке"
onChange="window.status='Текст был изменен';">
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В строке состояния появится текст: "Текст был изменен".

Команда onSelect (на выделение)

Эта команда работает так же, как и три предыдущие, отмечая, что в поле ввода произошли изменения, — в данном случае был выделен текст.

Рассмотрим пример.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body>
<form>
<input TYPE="text" size="45"
value="Выделите текст "
onSelect="window.status='Текст был выделен';">
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В строке состояния появится текст: "Текст был выделен"

Команда onSubmit (на отправку)

Это очень популярная команда. Она позволяет вызвать какое-либо действие, когда вы нажимаете кнопку Submit (отослать, отправить). Многим очень хочется, чтобы после того, как пользователь нажимает на кнопку, у него на экране появлялась страница с надписью: «Спасибо, что вы нам написали».

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body>
<form>
<input TYPE="submit"
onSubmit="parent.location='strou.html'";>
</form>
</body>
</html>

У нас новая команда. Схема как будто знакомая, но какая-то странная.
parent.location — это стандартная схема ссылки на другую страницу. Можно подумать, что parent (источник) — это объект, а location (местонахождение) — метод. Неверно. В данном случае parent является свойством окна браузера, а location — объектом, который появится в этом окне. То есть для ясности просто имейте в виду, что parent.location='' означает ссылку.

В окне веб-браузера это будет выглядеть ТАК.

Щелкайте по кнопке.

Чтобы закрепить пройденный материал, давайте создадим форму опроса, в которой будет три элемента:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body>
<form>&nbsp;
Введите ваше имя<br>

&nbsp;&nbsp;
<input type="text" size="30" value="" onFocus="window.status='Впишите ваше имя';"><br><br>

&nbsp;&nbsp;&nbsp;
Какую музыку вы предпочитаете?<br>

&nbsp;&nbsp;
<input type="checkbox" value="классика" onFocus="window.status='Вы выбрали классику';">классику
<br>
&nbsp;&nbsp;
<input type="checkbox" value="рок" onFocus="window.status='Вы выбрали рок';">рок<br>
<br>
&nbsp;
<input type="submit" value="Отправить" onSubmit="parent.location='strou.html'" onClick="alert('Благодарим за участие в опросе');">

</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.



  • Другие |
назадвверхвперед
Rambler's Top100