Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Ответы на вопросы дополнено.docx
Скачиваний:
10
Добавлен:
19.09.2019
Размер:
1.4 Mб
Скачать

События динамичеcкого html

На WEB-страницах можно обеспечить реакцию на определенные действия посетителя или изменения состояния документа или окна, которые вызывают определенные события.

Посетитель генерирует события при передвижении мыши, нажатии кнопок мыши и клавиатуры. Изменения состояния документа генерируют события при загрузке документа, изображений или объектов, при появлении ошибки на странице или переходе фокуса от одного элемента к другому.

Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии по умолчанию.

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

Пример 1

<html>

<head>

<meta http-equiv=Content-Type

content="text/html; charset=windows-1251">

</head>

<body lang=RU>

<H2>Всплывание события</H2>

<b>Для получения информации можно щелкнуть мышкой как на изображении,

так и на тексте</b><br>

<a href="be.htm"><img src="be.gif" align="left">Кто это?</a>

</body>

</html>

Действие по умолчанию обеспечивается встроенной в броузер обработкой событий. Например, действием по умолчанию на нажатие ссылки <A href="…"> является переход по указанному адресу и загрузка страницы. Многие события позволяют заменить встроенные действия по умолчанию на индивидуальную обработку.

Связывание событий

Установление связи между определенным событием и сценарием называется связыванием событий. События можно связать с помощью специальных атрибутов любого элемента или с помощью тэга SCRIPT.

Связывание событий с атрибутами удобно, но требует расширения языка HTML каждый раз при изобретении нового события. А так как HTML развивается медленно, данный подход используется только для небольшого набора встроенных событий. Как атрибуты любого элемента в DHTML представлены события мыши и клавиатуры.

Обратите внимание на то, что в примере 2 область действия обработчика события определена с помощью идентификатора B_B, а в примере 3 – с помощью указателя this.

Использование тэга SCRIPT является более общим механизмом связывания события со сценарием. При этом можно использовать новые атрибуты такие, как FOR и EVENT:

  • FOR указывает имя или идентификатор (ID) элемента, для которого описывается событие;

  • EVENT указывает событие и все параметры, которые ему могут быть переданы.

Пример 3 теперь примет следующий вид:

Все события также представлены как свойства в DOM. Используя это, перепишем наш пример в таком виде:

Не следует забывать, что все имена свойств надо вводить в нижнем регистре.

События мыши

  • OnMouseOver. Перемещение указателя мыши на элемент.

  • OnMouseOut. Перемещение указателя мыши за пределы элемента.

  • OnMouseDown. Нажатие любой кнопки мыши. Внутри обработчика event.button указывает, какая кнопка нажата: 1 = левая, 2 = правая, 4 = средняя.

  • OnMouseUp. Отпускание любой кнопки мыши. Внутри обработчика event.button указывает, какая кнопка отпущена: 1 = левая, 2 = правая, 4 = средняя.

  • OnMouseMove. Перемещение указателя мыши. Внутри обработчика event.x и event.y - текущие координаты "горячей" точки курсора на экране.

  • OnClick. Щелчок левой кнопкой мыши на элементе или нажатие <Enter> при каком-то элементе в фокусе.

  • OnDblClick. Двойной щелчок левой кнопкой мыши на элементе.

  • OnDragStart. Запуск операции перетаскивания. Цель – запретить операцию перетаскивания путем возвращения значения false.

  • OnSelectStart. Запуск операции выделения элемента. Цель – запретить выделение области документа. Важно учесть, что отменяется лишь инициализация выделения, т.е. если выделение начато за пределами данной области, а на ней лишь продолжается, то помешать выделению нельзя. Событие OnSelectStart всплывающее, поэтому можно перехватить его и вернуть значение false. Это лишит посетителя возможности выделять текст на странице (см. Пример 10).

  • OnSelect. Выделение элемента. Следует за OnSelectStart и возникает много раз по мере того, как посетитель расширяет или сужает выделение. Событие OnSelect не всплывает. Оно возникает лишь в том разделе документа, где происходит выделение.

События клавиатуры

  • OnKeyPress. Нажатие и отпускание клавиши. Событие возникает много раз, если клавиша удерживается.

  • OnKeyDown. Нажатие клавиши. Событие возникает один раз, даже если клавиша продолжает удерживаться.

  • OnKeyUp. Отпускание клавиши.

Событие прокручивания

  • OnScroll. Использование полосы прокрутки или прокручивание элемента неявно посредством другого действия Не может отменить прокручивания, так как возникает после завершения прокручивания. Не всплывает.

События фокуса

  • OnFocus. Возникает, когда элемент активизируется после щелчка по нему мышью или с помощью клавиатуры. Фокус могут получить только элементы пользовательского ввода и тело документа, а не элементы содержания документа.

  • OnBlur. Возникает, когда элемент теряет фокус. Используется для контроля корректности ввода.

События формы

  • OnChange. Возникает при любых изменениях в форме. Для текстового поля это ввод или удаление. Для списка – выбор нового элемента. Так же, как и OnBlur используется для контроля корректности ввода.

  • OnSubmit. Возникает перед отправкой содержимого формы на сервер. Основное назначение – проверка корректности введенных данных. Отмена передачи данных происходит при возвращении значения false. При выполнении примеров 6 и 7 обратите внимание на различия в окне "Адрес" при наборе неверного значения.

  • OnReset. Возникает после щелчка на кнопке Reset. Назначение – вывод предупреждения о сбросе.