2.4 Еще несколько обработчиков событий
Вы уже представляете себе, что такое некоторые события и команды, которые ими управляют. Давайте рассмотрим, как действуют другие. Все они работают по одной схеме.
Команда onClick (на щелчок)
Вы уже знаете, что onMouseOver запускает событие, если навести курсор на ссылку. Следовательно, щелкнув по ссылке, можно с таким же успехом запустить событие через onClick. Чтобы продемонстрировать действие команды, воспользуемся методом alert (см. пример 2.4). Вот еще раз его схема: alert('текст, который появится в окне')
Таким образом, получаем:
<a href="http://www.newmail.ru" onClick="alert('Уже уходите!');"> Жмите сюда</a>
Команда onFocus (на фокус)
Эта команда вызывает действие, когда пользователь «фокусируется» на элементе страницы. Это годится для форм: флажков (checkbox) и текстовых полей (textbox). Вот пример:
<form> <input type="text" size="30" onFocus="window.status='Текст в строке состояния';"> </form>
Конец формы
Команда onBlur (на потерю фокуса)
Если можно сосредоточиться на объекте, значит, можно и «потерять фокус». оnBlur позволяет сообщить пользователю о том, что он изменил свой ответ. Этот обработчик не так часто используется, но вот вам пример. Строка для ввода текста, в которой уже что-то написано. Если изменить текст и увести курсор, как если бы вы перешли к следующему предмету в списке, появится окно с предупреждением. Вот как это делается:
<form> <input type="text" size="45" 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='thanksalot.html'";> </form>
Обратите внимание - у нас новая команда. Схема как будто знакомая, но какая-то странная. parent.location — это стандартная схема ссылки на другую страницу. Можно подумать, что parent (источник) — это объект, а location (местонахождение) — метод. Неверно. В данном случае parent является свойством окна браузера, а location — объектом, который появится в этом окне.
Рассмотренные выше команды приведены в примере 2.5, а результат на рис. 2.5.
|
Пример 2.5. Обработчики событий |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Обработчики событий</TITLE> </HEAD> <BODY> <P align=center> <a href="http://www.newmail.ru" onClick="alert('Уже уходите!');"> Жмите сюда</a> <form> <input type="text" size="30" onFocus="window.status='Текст в строке состояния';"> </form> <form> <input type="text" size="45" value="Впишите свое имя и щелкните по другой строке" onBlur="alert('Вы изменили ответ — уверены, что он правильный?');"> </form> <form> <input TYPE="text" size="45" value="Измените текст и щелкните по другой строке" onChange="window.status='Текст был изменен';"> </form> <form> <input TYPE="submit" onSubmit="parent.location='thanksalot.html'";> </form> </BODY> </HTML>
|
