Обработка событий в JavaScript
Очень важное место в программировании Web-страниц занимают события. События генерируются в результате действий пользователя (щелчков мыши, нажатия клавиш и пр.). Разрабатывая Web-страницы, можно составить сценарий таким образом, что страница будет реагировать на некоторые из событий. Это делается с помощью специальных программ, которые называются обработчиками событий. Программы обработчиков событий представляют собой фрагменты кода и обычно оформляются в виде функций. Обработчик событий, написанный на JavaScript, вводится в сценарий просто — буквально одной строкой, например:
<input name=input1 type=text onclick="alert(this.value);">
<input name=input2 type=text onchange="function1(this.value)">
В табл. 1.1 приведены события и элементы HTML, в которых эти события могут происходить.
Таблица 1.1. События и объекты
|
Обработчик события |
Поддерживающие HTML-элементы |
Описание |
|
onAbort |
IMG |
Прерывание загрузки изображения |
|
onBlur |
A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA |
Потеря текущим элементом фокуса, т. е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо при нажатии клавиши табуляции |
|
onChange |
INPUT, SELECT, TEXTAREA |
Изменение значений элементов формы. Возникает после потерей элементом фокуса, т. е. после события blur |
|
onClick |
Практически все HTML- элементы |
Одинарный щелчок (нажата и отпущена кнопка мыши) |
|
onDblClick |
То же |
Двойной щелчок |
Таблица 1.1 (окончание)
|
Обработчик события |
Поддерживающие HTML-элементы |
Описание |
|
onError |
IMG, WINDOW |
Возникновение ошибки выполнения сценария |
|
onFocus |
A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA |
Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции) |
|
onKeyDown |
Практически все HTML- элементы |
Нажата клавиша на клавиатуре |
|
onKeyPress |
То же |
Нажата и отпущена клавиша на клавиатуре |
|
onKeyUp |
То же |
Отпущена клавиша на клавиатуре |
|
onLoad |
BODY, FRAMESET |
Закончена загрузка документа |
|
onMouseDown |
Практически все HTML- элементы |
Нажата кнопка мыши в пределах текущего элемента |
|
onMouseMove |
То же |
Перемещение курсора мыши в пределах текущего элемента |
|
onMouseOut |
То же |
Курсор мыши выведен за пределы текущего элемента |
|
onMouseOver |
То же |
Курсор мыши наведен на текущий элемент |
|
onMouseUp |
То же |
Отпущена кнопка мыши в пределах текущего элемента |
|
onMove |
WINDOW |
Перемещение окна |
|
onReset |
FORM |
Сброс данных формы (щелчок по кнопке <input type="reset">) |
|
onResize |
WINDOW |
Изменение размеров окна |
|
onSelect |
INPUT, TEXTAREA |
Выделение текста в текущем элементе |
|
onSubmit |
FORM |
Отправка данных формы (щелчок на кнопке <input type="submit">) |
|
onUnload |
BODY, FRAMESET |
Попытка закрытия окна браузера и выгрузки документа |
Источник: Петин В. А., Сайт на AJAX под ключ. Готовое решение для интернет-магазина. — СПб.: БХВ-Петербург, 2011. — 432 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Что такое селекторы и как их правильно использовать (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Выбор единиц измерения размера шрифтов:пикселы, пункты, пики или что-то другое (0)
- Организация табличных данных:удобство доступа и наглядность (0)
- Чередование фонового цвета столбцов таблицы (0)
- Изменение вида элементов формы с помощью CSS (0)
- Группировка связанных полей формы (0)
