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

Концепция

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

Давайте рассмотрим теперь действие еще нескольких обработчиков событий. Все они работают по одной схеме. Поэтому, зная формат события и представляя логику его работы, можно легко поместить его на 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

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