Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
курс полный.doc
Скачиваний:
8
Добавлен:
15.08.2019
Размер:
756.74 Кб
Скачать

Модель событий dom

Особенностью программ, создаваемых для среды веб является то, что они управляются событиями. Чтобы узнать, какое событие произошло, в DOM имеется объект события event (табл. 15). Объект event является локальным и его следует явным образом передавать в обработчик события.

Таблица 15

Свойства объекта event

Свойство

Описание

bubbles

Указывает возможность «всплывания» события (передачи управления вверх по иерархической структуре)

cancelable

Указывает возможность отмены действия события, заданного по умолчанию

currentTarget

Указывает событие, обрабатываемое в данный момент

eventPhase

Указывает фазу возбуждения события

target (только NN 6)

Указывает элемент, вызвавший событие

timestamp (только NN 6)

Указывает время возникновения события

type

Указывает имя события

События, связанные с мышью, генерируют объект mouse (табл. 16).

Приведем пример динамически изменяемого текста.

<html> <head> <script language = "JavaScript"> function onMouseover() { var temp = document.getElementById("DynamicText"); temp.firstChild.nodeValue = "Указатель мыши на тексте"; temp.style.color = "red"; } function onMouseout() { var temp = document.getElementById("DynamicText"); temp.firstChild.nodeValue = "Динамический текст"; temp.style.color = "black"; } </script> <title>Динамический текст</title> </head> <body> <p id = "DynamicText" onmouseover = "return onMouseover()" onmouseout = "return onMouseout()">Динамический текст</p> </body> <html>

Таблица 16

Свойства объекта mouse

Свойство

Описание

altKey

Указывает, была ли нажата клавиша <Alt> в момент возникновения события

button

Указывает, какая клавиша мыши была нажата

clientX

Сообщает горизонтальную координату указателя мыши в окне браузера на момент возникновения события

clientY

Сообщает вертикальную координату указателя мыши в окне браузера на момент возникновения события

ctrKey

Указывает, была ли нажата клавиша <Ctrl> в момент возникновения события

metaKey

Указывает, была ли нажата метаклавиша в момент возникновения события

relatedTarget (только NN 6)

Указывает цель события

screenX

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

screenY

Сообщает вертикальную координату указателя мыши в окне браузера, вычисленную от начала экранных координат, на момент возникновения события

shiftKey

Указывает, была ли нажата клавиша <Shift> в момент возникновения события

Пример, определяющий координаты нахождения курсора мыши.

<html> <head> <title>Определение координат курсора</title> <script language = "JavaScript"> function onClick(e) { alert("X = " + e.clientX + "; " + "Y = " + e.clientY); } </script> </head> <body onclick = "onClick(event)"> <p>Щелкните мышью на экране<p> </body> </html>