2014-02-10
336
Помимо автоматически запускаемых событий, можно «вручную» создавать и запускать события. Операции создания и запуска событий также по-разному реализуются в Internet Explorer и Web-браузерах, поддерживающих спецификацию DOM 2 (Firefox, Opera и Safari).
В Internet Explorer методы интерфейса Document дополнены методом
createEventObject(событие)
Необязательный параметр событие задает существующий объект event, на базе которого создается новый объект. Метод возвращает созданный объект event.
Для запуска события в заданном элементе HTML как объекте DOM используется метод
fireEvent(имя-события, событие)
Параметр имя-события задает имя запускаемого события (например, "click"). Необязательный параметр событие задает созданный ранее объект event, из которого получаются свойства запускаемого события. Метод возвращает значение true, если действие события по умолчанию может быть отменено было и false – в противном случае. Независимо от значений свойств, заданных для созданного события, значения следующих свойств являются фиксированными: cancelBubble равно false, returnValue равно true, type – имя запущенного события, srcElement – элемент, для которого запущено событие.
|
|
|
В Web-браузерах, поддерживающих спецификацию DOM 2, формирование события состоит из трех этапов:
· создание события:
· инициализация значений свойств события;
· направление события элементу, для которого это событие будет обрабатываться, и запуск события.
Создание события выполняется с помощью метода
createEvent(событие)
интерфейса DocumentEvent. Параметр событие задает имя вида (интерфейса) события: "Event", "UIEvent", "MouseEvent" и "MutationEvent". Метод возвращает созданный объект заданного вида. Кроме метода createEvent() интерфейс DocumentEvent не содержит других свойств и методов.
Для каждого вида события в спецификации DOM 2 определен свой метод инициализации значений свойств события. Ни один из этих методов не возвращает значения.
Для события вида Event запуск выполняется с помощью метода
initEvent(тип, значение-bubbles, значение-cancelable)
интерфейса Event. Параметр тип задает тип события (существующий тип события или имя объекта, созданного с помощью метода createEvent()). Параметр значение-bubbles определяет, может ли «всплывать» событие (значение true) или нет (значение false). Параметр значение-cancelable определяет, может ли быть отменено действие события по умолчанию (значение true) или нет (значение false).
Для события вида UIEvent запуск выполняется с помощью метода
initUIEvent(тип, значение-bubbles, значение-cancelable,
значение-view, значение-detail)
интерфейса UIEvent. Параметры тип, значение-bubbles и значение-cancelable имеют тот же смысл, что и одноименные параметры в функции initEvent(). Параметры значение-view и значение-detail задают для события значения свойств view и detail.
|
|
|
Для события вида MouseEvent запуск выполняется с помощью метода
initMouseEvent(тип, значение-bubbles, значение-cancelable,
значение-view, значение-detail, значение-screenX, значение-screenY,
значение-clientX, значение-clientY, значение-ctrlKey, значение-altKey,
значение-shiftKey, значение-metaKey, значение-button,
значение-relatedTarget)
интерфейса MouseEvent. Параметры тип, значение-bubbles и значение-cancelable имеют тот же смысл, что и одноименные параметры в функции initEvent(). Параметры значение-view и значение-detail имеют тот же смысл, что и для метода initUIEvent(). Параметры значение-screenX, значение-screenY, значение-clientX, значение-clientY, значение-ctrlKey, значение-altKey, значение-shiftKey, значение-metaKey, значение-button и значение-relatedTarget задают для события значение соответственно свойств screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button и relatedTarget.
Для события вида MutationEvent запуск выполняется с помощью метода
Метод интерфейса MutationEvent
initMutationEvent(тип, значение-bubbles, значение-cancelable,
значение-relatedNode, значение-prevValue, значение-newValue,
значение-attrName, значение-attrChange)
интерфейса MutationEvent. Параметры тип, значение-bubbles и значение-cancelable имеют тот же смысл, что и одноименные параметры в функции initEvent(). Параметры значение-relatedNode, значение-prevValue, значение-newValue, значение-attrName и значение-attrChange задают для события значение соответственно свойств relatedNode, prevValue, newValue, attrName и attrChange.
Направление события элементу, для которого это событие будет обрабатываться, и запуск события выполняется с помощью метода
dispatchEvent(событие)
интерфейса EventTarget. Параметр событие является объектом типа Event (см. 4.5.9.2.2). Метод возвращает false, если при обработке события был вызван метод preventDefault() (см. 4.5.9.2.2), в противном случае возвращает true.
Пример 4.5.49. Создание и запуск нового события:
Тело документа HTML содержит кнопку со значением идентификатора id, равным "startButton":
<button id="startButton"
style="color: green; font-weight: bold">Старт</button>
Функция eventHandlers() объявляет функции-обработчики событий мыши для кнопки startButton:
function eventHandlers()
{
// Объявление функции-обработчика
// проведения курсора мыши над кнопкой startButton
document.getElementById("startButton").onmouseover =
mouseoverHandler;
// Объявление функции-обработчика
// щелчка мышью по кнопке startButton
document.getElementById("startButton").onclick =
clickHandler;
}
Эта функция вызывается в элементе body при загрузке Web-страницы:
<body onload="eventHandlers()">
Функция mouseoverHandler() выполняет обработку событий мыши для кнопки startButton:
function mouseoverHandler(evt)
{
// Получение элемента startButton
startElement = document.getElementById("startButton");
// Вывод сообщения
alert("Курсор над кнопкой");
// Изменение цвета надписи кнопки
startElement.style.color = "red";
// Если Web-браузер – Internet Explorer
if (navigator.userAgent.indexOf("MSIE")!= -1)
{
// Создание нового объекта события
clickEventObj = document.createEventObject();
// Присвоение свойству clientX нового
// объекта значения свойства clientX
// события mouseover
clickEventObj.clientX = window.event.clientX;
// Присвоение свойству clientY нового
// объекта значения свойства clientY
// события mouseover
clickEventObj.clientY = window.event.clientY;
// Запуск события click
// для кнопки startButton
startElement.fireEvent("onclick", clickEventObj);
}
else
{
// Создание нового события вида MouseEvent
clickEventObj =
document.createEvent("MouseEvent");
// Инициализация свойств нового
// события типа click
clickEventObj.initMouseEvent("click", false,
false, evt.view, 0, evt.screenX, evt.screenY,
evt.clientX, evt.clientY, false, false, false,
false, 0, null);
// Направление обработки события элементу
// startButton и запуск события
startElement.dispatchEvent(clickEventObj);
}
}
Функция clickHandler() обрабатывает запущенное новое событие типа click:
function clickHandler(evt)
{
// Если Web-браузер – Internet Explorer
if (navigator.userAgent.indexOf("MSIE")!= -1)
{
// Определение координаты clientX в IE
clientX = window.event.clientX;
// Определение координаты clientY в IE
clientY = window.event.clientY;
}
else // Если Web-браузер совместим с DOM 2
{
// Определение координаты clientX в DOM 2
|
|
|
clientX = evt.clientX;
// Определение координаты clientY в DOM 2
clientY = evt.clientY;
}
// Вывод сообщения с координатами точки
alert("Кнопка нажата в точке с координатами (" +
clientX + "," + clientY + ")");
}
В результате перемещения курсора мыши на кнопку startButton в Web-странице будут выведены следующие сообщения:
| 
|
В остальных Web-браузерах вывод будет иметь аналогичный вид.
