События JavaScript
|
Использование языка JavaScript при обработке событий значительно расширило возможности языка HTML. Чаще всего программы создаются для обработки информации, вводимой пользователем в поля форм. Возможности управления элементами форм обеспечиваются главным образом за счет функций обработки событий, которые могут быть заданы для всех элементов формы. События делятся на несколько категорий:
-
события, связанные с документами (события документа):
-
- загрузка и выгрузка документов;
-
события, связанные с гиперсвязью (события гиперсвязи):
-
- активизация гиперсвязи;
-
события, связанные с формой (события формы):
-
- щелчки мыши на кнопках
-
- получение и потеря фокуса ввода и изменение содержимого полей ввода, областей текста и списков;
-
- выделение текста в полях ввода и областях текста;
-
события, связанные с мышью:
-
- помещение указателя мыши на гиперсвязь и активизация гиперсвязи.
События, связанные с документами, возникают при загрузке и выгрузке документа, в то время как события гиперсвязей возникают при их активизации или при помещении на них указателя мыши.
Чтобы обеспечить перехват события, необходимо написать функцию-обработчик события. В качестве обработчиков событий могут быть заданы целые функции языка JavaScript или только группы из одного или нескольких JS-операторов. В таблице перечислены имена всех событий и условия их возникновения:
| Имя события |
Атрибут HTML |
Условие возникновения события |
| Blur |
onBlur |
Потеря фокуса ввода элементом формы |
| Change |
onChange |
Изменение содержимого поля ввода иди области текста, либо выбор нового элемента списка |
| Click |
onClick |
Щелчок мыши на элементе формы или гиперсвязи |
| Focus |
onFocus |
Получение фокуса ввода элементом формы |
| Load |
onLoad |
Завершение загрузки документа |
| MouseOver |
onMouseOver |
Помещение указателя мыши на гиперсвязь |
| MouseOut |
onMouseOut |
Помещение указателя мыши не на гиперсвязь |
| Select |
onSelect |
Выделение текста в поле ввода или области текста |
| Submit |
onSubmit |
Передача данных формы |
| Unload |
onUnload |
Выгрузка текущего документа и начало загрузки нового |
|
|
|
|
|
Далее рассмотрим некоторые примеры использования этих событий.
Программирование потери фокуса
Атрибут обработчика события onBlur (потеря фокуса) работает со следующими тегами HTML:
С помощью атрибута onBlur задается выражение языка JavaScript, которое выполняется, когда соответствующий элемент HTML-формы теряет фокус ввода. Потеря ффокуса ввода происходит либо при щелчке мыши на другом элементе формы или другой формы, либо при переходе к другому элементу формы посредством клавиши [Tab]. Атрибут onBlur применяют для проверки данных, введенных в соответствующее поле.
Рассмотрим пример в котором идет проверка на возраст. Если введено число менее 16 - поле ввода очищается и выдается соответствующее сообщение:
HTML код этого примера выглядит следующим образом:
Вам необходимо доработать код так, чтобы на потерю фокуса реагировало поле "Имя", а окно-сообщение включало в себя введенное пользователем имя.
Атрибут onClick может использоваться в следующих тегах HTML:
Операторы языка JavaScript, заданные в атрибуте onClick, выполняются при щелчке мыши на таких объектах как гиперсвязь, кнопка перезагрузки формы или контрольный переключатель. Для контрольных переключателей и селекторных кнопок событие Click возникает не только при выборе элемента, но и при разблокировании.
Разберем пример использования атрибута onClick для кнопок, определенных тегами <input type="button"> в контейнере <form> . . . </form>:
Работает этот пример следующим образом:
Код примера (использованы функции):
Когда пользователь щелкает мышью по кнопке, вызывается либо функция but1(), либо but2(). При этом с помощью метода alert() на экран выводится соответствующее сообщение. (я часто применяю метод alert() так, как с помощью его очень удобно демонстрировать работу той или иной программы)
Программирование флажков
Разберем использование события onClick например для переключателей (флажков). Обработка этого события здесь выполняется как при включении, так и при выключении переключателей. Для проверки состояния переключателей следует использовать свойство checked, которое содержит значение true, если переключатель включен и false - если выключен. Рассмотрим пример:
Код этого примера
Обратите внимание на аргументы функций chk1 и chk2 . Объясните, почему нужна запись onClick="chk1(this.form.c1)"?
Динамические подсказки
OnMouseOver позволяет активизировать JavaScript-операторы, когда курсор мыши находится на активной гиперсвязи, а атрибут onMouseOut - когда курсот отведен от гиперсвязи.
- <a onMouseOver="expr | function()"> . . . </a>
- <a onMouseOut="expr | function()"> . . . </a>
Атрибут onMouseOver запускает сценарий JavaScript, когда указатель мыши наведен на объект, в котором задан этот атрибут. При обработке событий MouseOver можно изменять сообщения в строках состояния и текстовые поля. Кроме того часто используются для динамической подмены рисунка.
Атрибут onMouseOut предоставляет возможность активизировать операторы языка JavaScript при уходе курсора мыши за пределы области объекта. Обработку события MouseOut следует выполнять, когда необходимо отменить ранее заданные действия. Например, если при обработке события MouseOver произошла подмена рисунка, то при обработке события MouseOut могут быть востановлены исходные данные. Эта же техника позволяет реализовать динамические подсказки, когда пользователь получает дополнительную информацию, наводя курсор на некоторый объект страницы.
Пример:
Поместите указатель мыши на объект.
OnMouseOver
OnMouseOut
Код такого примера
включает в себя уже использование переменных и специальных приемов кодирования (например <a href="#"...>