Интерфейс MouseEvent в DOM2

Интерфейс UIEvent в DOM2

Интерфейс UIEvent содержит данные о событии пользовательского интерфейса. Для него определены два свойства: view и detail.

Свойство view отображает вид документа и имеет тип AbstractView, определенный в спецификации DOM 2 Views. Интерфейс AbstractView является базовым для всех отображений документа, в том числе фреймов. Этот интерфейс имеет единственное свойство document, возвращающее указатель на объект Document, соответствующий отображаемому документу. Интерфейс Document, в свою очередь, может иметь свойство defaultView типа AbstractView, указывающее на окно отображения документа. Окно отображения документа реализуется в Web-браузерах с помощью объекта window (см.4.5.11), к которому можно обратиться в сценарии непосредственно.

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

Интерфейс UIEvent наследует все свойства и методы интерфейса Event.

Интерфейс MouseEvent содержит данные о событиях, связанных с мышью.

Для этого интерфейса определены следующие свойства, доступные только для чтения:

· relatedTarget – содержит вторичный элемент для данного события, например, элемент в который переместился указатель мыши или элемент, который покинул указатель мыши;

· button – содержит номер кнопки мыши, нажатой пользователем (0 – левая кнопка, 1 – средняя кнопка и 2 – правая кнопка (аналогично одноименному свойству для объекта event в Internet Explorer, но с другими значениями для кнопок);

· altKey – содержит true, если была нажата клавиша Alt и false – в противном случае (аналогично одноименному свойству для объекта event в Internet Explorer);

· ctrlKey – содержит true, если была нажата клавиша Ctrl и false – в противном случае (аналогично одноименному свойству для объекта event в Internet Explorer);

· shiftKey – содержит true, если была нажата клавиша Shift (↑) и false – в противном случае (аналогично одноименному свойству для объекта event в Internet Explorer);

· metaKey – содержит true, если была нажата клавиша Meta и false – в противном случае (в разных компьютерных платформах эта клавиша называется по-разному, если она есть);

· clientX – содержит координату x (в пикселях) курсора мыши относительно клиентской области окна (без учета рамок, заголовка, строки меню, панелей инструментов и строки состояния) (аналогично одноименному свойству для объекта event в Internet Explorer);

· clientY – содержит координату y (в пикселях) курсора мыши относительно клиентской области окна (без учета рамок, заголовка, строки меню, панелей инструментов и строки состояния) (аналогично одноименному свойству для объекта event в Internet Explorer);

· screenX – содержит координату x (в пикселях) курсора мыши относительно экрана дисплея (аналогично одноименному свойству для объекта event в Internet Explorer);

· screenY – содержит координату y (в пикселях) курсора мыши относительно экрана дисплея (аналогично одноименному свойству для объекта event в Internet Explorer);

· pageX – содержит координату x (в пикселях) курсора мыши относительно ширины выводимой страницы, с учетом горизонтальной прокрутки (аналогично одноименному свойству для объекта event в Internet Explorer);

· pageY – содержит координату y (в пикселях) курсора мыши относительно высоты выводимой страницы, с учетом вертикальной прокрутки (аналогично одноименному свойству для объекта event в Internet Explorer).

Интерфейс MouseEvent наследует все свойства и методы интерфейсов Event и UIEvent.

При работе с координатами курсора мыши можно использовать также следующие свойства интерфейса Element в DOM 3 (они поддерживаются практически всеми Web-браузерами, включая Internet Explorer, Firefox, Opera и Safari):

· clientLeft и clientTop – координаты x и y (в пикселях) левого верхнего угла содержимого элемента (см. 4.3.16) левого верхнего угла блока элемента, включая границы;

· clientWidth и clientHeight – ширина и высота (в пикселях) содержимого элемента (см. 4.3.16), исключая границы и полосы прокрутки, но включая отступ;

· offsetParent – элемент-предок данного элемента, определяемый по следующему алгоритму: при подъеме вверх по дереву элементов DOM это либо первый нестатический элемент (см. 4.5.12.1.2), либо (если данный элемент является статическим) один из элементов table, th или td, либо элемент body;

· offsetLeft и offsetTop – координаты x и y (в пикселях) левого верхнего угла блока элемента (см. 4.3.16) относительно его элемента offsetParent;

· offsetWidth и offsetHeight – ширина и высота (в пикселях) элемента, включая границы (см. 4.3.16);

· scrollLeft и scrollTop – величина прокрутки элемента (в пикселях) по осям x и y;

· scrollWidth и scrollHeight – ширина и высота (в пикселях) содержимого элемента (см. 4.3.16), включая те части содержимого элемента, которые в настоящий момент не видны.

Свойства scrollLeft и scrollTop доступны как для чтения, так и для модификации, остальные свойства доступны только для чтения.

Пример 4.5.47. Использование свойств и методов события Event:

1. Обработка событий мыши для элемента:

В теле документа HTML задана кнопка со значением идентификатора id, равным "b1":

<button id="b1" style="color: green">Кнопка 1</button>

Функция b1EventHandlers()объявляет функцию-обработчик событий мыши для кнопки b1:

function b1EventHandlers()

{

document.getElementById("b1").onclick=b1Event;

document.getElementById("b1").onmouseover=b1Event;

document.getElementById("b1").onmouseout=b1Event; }

Эта функция вызывается в элементе body при загрузке Web-страницы:

Функция b1Event() выполняет обработку событий мыши для кнопки b1:

function b1Event(evt)

{

// Если Web-браузер – Internet Explorer

if (navigator.userAgent.indexOf("MSIE")!= -1)

// Определение типа события в IE

type = window.event.type;

else // Если Web-браузер совместим с DOM2

// Определение типа события в DOM 2

type = evt.type;

// Получение элемента b1

b1Element = document.getElementById("b1");

// Обработка событий разных типов

switch(type)

{

case "mouseover":

// Изменение стиля надписи кнопки

b1Element.style.color = "red";

b1Element.style.fontWeight = "bold";

break;

case "mouseout":

// Восстановление стиля надписи кнопки

b1Element.style.color = "green";

b1Element.style.fontWeight = "";

break;

case "click":

// Вывод сообщения

alert("Нажата кнопка 1");

}

Ниже приведен вывод Web-страницы в начальном состоянии, при проведении курсором мыши над кнопкой (событие mouseover), при выходе курсора мыши за пределы кнопки (событие mouseout) и при щелчке мышью по кнопке (событие click):