16. События. Объект event

Содержание

Передача объекта event функции-обработчику

Передача элемента-источника функции-обработчику

Связывание элемента-источника и события с функцией-обработчиком

Пример: Фотогалерея

Об использовании ключевого слова this

Вопросы

Обработка событий занимает центральное место в разработке динамических веб-страниц. С точки зрения DOM API, событие– это сообщение, отправляемое в ответ на некоторое действие, например, завершение загрузки документа, перемещение или щелчок мыши, нажатие клавиши. Событие может быть принято (перехвачено) и обработанопрограммнымисредствами. Обработчик события – это, как правило, функция, написанная на языке сценариев (например, JavaScript), которая выполняет действия, когда произошло соответствующее событие.

Вот список основных событий:

• События окна и документа: onload – документ загружен и противоположное событие onunload – документ выгружен из окна. Применяется к элементам body и frameset и объекту window.

• События мыши: onclick – (одиночный) щелчок мыши и ondblclick – двойной щелчок. Одиночный щелчок может быть разложен на два события, onmousedown – кнопка мыши нажата и onmouseup – кнопка мыши отпущена. Отслеживаются также перемещения мыши: onmouseover – указатель мыши пересек границу объекта внутрь, onmouseout - указатель мыши пересек границу объекта наружу и onmousemove – мышь перемещается над объектом. Применяется к большинству элементов.

• События клавиатуры: onkeypressed – нажата и отпущена клавиша, производящая символ. Это событие разделяется на два, onkeydown – клавиша нажата и onkeyup –клавиша отпущена. Применяется к большинству элементов.

• События HTML-формы onsubmit и onreset и элементов формы onfocus, onblur и onchange рассмотрены в лекции "HTML формы".

Объект window.eventсоздается браузером автоматически в момент возникновения события и доступен только внутри функции-обработчике события. Следует подчеркнуть, что модель объектаeventв Internet Explorer существенно отличается от используемой в других браузерах, и требуется большое внимание при разработке динамических страниц, предназначенных для разных браузеров. Тем не менее, целый ряд свойств оказывается одинаковым во всех современных браузерах.

• type – тип события без приставки "on". Например, событие onclick имеет тип click.

• button – нажатая кнопка мыши (0 – ни одна, 1 – левая, 2 – правая, 3 – левая и правая, 4 – средняя, 5 – левая и средняя, 6 – правая и средняя, 7 – все три). Это свойство имеет смысл для событий мыши. В случае остальных событий имеет значение 0 независимо от действительного состояния кнопок.

• clientX, clientY – координаты указателя мыши относительно верхнего левого угла клиентской области окна браузера.

• screenX, screenY - координаты указателя мыши относительно верхнего левого угла дисплея.

• keyCode – целочисленный код клавиши, которая вызвала событие клавиатуры. Коды клавиш различаются для различных аппаратных платформ (PC или Macintosh).

• shiftKey, ctrlKey, altKey – истина (true), если во время события нажата также клавиша Shift, Ctrl или Alt, соответственно.

• cancelBubble – запрещает (true) или разрешает (false, по умолчанию) передачу события вверх по иерархии от элемента-источника к родительскому элементу. Каждое событие происходит на единственном элементе-источнике. Если элементу-источнику не сопоставлена функция-обработчик, событие передается вверх по дереву элементов, пока не встретит функцию-обработчик или не достигнет корневого элемента. Если функция-обработчик найдена, но не содержит cancelBubble=true, то передача вверх продолжается, если содержит, то прерывается.

На этом список общих свойств заканчивается. Большинство остальных свойств объекта eventдоступны в различных браузерах под разными именами.

• Элемент-источник события в Internet Explorer доступен как свойство srcElement, в Mozilla Firefox и других как target.

• События onmouseover и onmouseout в Internet Explorer показывают свойства-объекты откуда (fromElement) и куда (toElement). В Mozilla Firefox эти объекты являются свойством relatedTarget.

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