Еще несколько обработчиков событий

Концепция

В предыдущем уроке были рассмотрены некоторые понятия обработки событий.

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

Сценарии и результаты их работы

Команда onClick

Мы знаем, что команда onMouseOver запускает событие, если навести курсор на ссылку. Аналогично, щелкнув по ссылке, можно с таким же успехом запустить событие с помощью команды onClick.

Чтобы продемонстрировать действие команды, воспользуемся методом alert. Этот метод использовался в задании к прошлому уроку. Вот еще раз его схема:

alert('текст, который появится в окне')

Таким образом, применяя тот же подход, что и для onMouseOver, получаем код:

<A HREF="http://www.mail.ru" 
onClick="alert('Посмотреть почту!');">
Щелкните здесь</A>

При щелчке на ссылке появится окно с сообщением "Посмотреть почту!"

Помните, что внутри одинарных кавычек нельзя употреблять слова с апострофами ', иначе браузер поймет их как окончание текста, а это будет ошибка.

Команда onFocus

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

Вот пример:

<FORM>
<INPUT TYPE="text" SIZE="30" 
onFocus="window.status='Текст в строке состояния';">
</FORM>

При использовании этого сценария выводится текстовое поле, при щелчке в котором в строке состояния выводится строка 'Текст в строке состояния'.

Команда onBlur

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

Создается текстовое поле с текстом. Надо изменить текст и затем щелкнуть мышью вне поля, имитируя переход фокуса к другому элементу.

Легко догадаться, как это делается, вот код:

<FORM>
<INPUT TYPE="text" SIZE="40" 
VALUE="Впишите свое имя и щелкните вне текстового поля" 
onBlur="alert('Вы изменили ответ — вы уверены, что он правильный?');">
</FORM>

Команда onChange

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

Этот обработчик события проверяет, сделал ли пользователь то, о чем его просили (точнее, был ли изменён объект!). Пример очень похож на предыдущий, но действует по-другому.

<FORM>
<INPUT TYPE="text" SIZE="45" 
VALUE="Измените текст и щелкните вне поля — затем  
   проверьте строку состояния" 
onChange="window.status='Текст был изменен'">
</FORM>

Т.е. при изменении текста в поле и последующем изменении фокуса в строке состояния выводится сообщение 'Текст был изменен'.

Событие onSelect

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

Команда onSubmit

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

Формат команды следующий:

<FORM>
<INPUT TYPE="submit"
onSubmit="parent.location='спасибо.html'";>
</FORM>

Здесь используются новые команды. Схема как будто знакомая, но какая-то странная.

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

Команды onLoad и onUnload

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

Обе они помещаются внутрь команды <BODY> документа HTML. Они вызывают событие, когда страница открывается или закрывается, то есть когда пользователь уходит со страницы. Эти команды будут очень полезны при работе с функциями.

Задание

В этом задании предлагается создать форму, которая будет взаимодействовать с пользователем (для этого необходимо знать о командах формы).

Форма должна иметь три элемента: поле ввода с просьбой ввести имя; два поля для флажков с вопросом о том, что предпочитает пользователь — мороженое или шоколад; кнопку отправки данных (submit).

С каждым элементом должно произойти следующее.

Возможное решение

Это можно сделать с помощью следующего сценария:

<FORM action="">

Name: <INPUT TYPE="text" SIZE="30" 
  onFocus="window.status='Введите свое имя';">
Что вы предпочитаете: 
<INPUT TYPE="checkbox" 
  onClick="window.status='Вы выбрали шоколад';"> 
  	Шоколад
<INPUT TYPE="checkbox"  
  onClick="window.status='Вы выбрали мороженое';"> 
  	Мороженое 
<INPUT TYPE="submit" 
  onClick="alert('Спасибо за участие в опросе');">

</FORM>