2014-02-10
313
Интерфейс MutationEvent содержит данные о событиях, связанных с изменениями в документе HTML.
Для этого интерфейса определены следующие свойства, доступные только для чтения:
· relatedNode – содержит вторичный узел для данного события, например, если событие направлено узлу, чей родительский элемент будет изменяться, то в этом свойстве будет содержаться родительский узел;
· prevValue – содержит предыдущее значение узла Attr для событии DOMAttrModified;
· newValue – содержит новое значение узла Attr для событии DOMAttrModified;
· attrName – содержит имя изменяемого узла Attr в событии DOMAttrModified;
· attrChange – содержит тип изменения для узла Attr при событии DOMAttrModified (целое число).
Свойство attrChange может иметь одно из следующих трех значений:
· MODIFICATION (1) – модификация узла Attr;
· ADDITION (2) – добавление узла Attr;
· REMOVAL (3) – удаление узла Attr.
Интерфейс MutationEvent наследует все свойства и методы интерфейса Event.
Пример 4.5.48. Использование свойств события MutationEvent:
Тело документа HTML содержит кнопку со значением идентификатора id, равным "startButton":
|
|
|
<button id="startButton"
style="color: green; font-weight: bold">Старт</button>
Функция startButtonEventHandlers()объявляет функцию-обработчик события мыши щелчка мыши по кнопке и блоков прослушивания событий изменения документа для кнопки startButton:
function startButtonEventHandlers()
{
// Объявление функции-обработчика
// щелчка мышью по кнопке startButton
document.getElementById("startButton").onclick =
clickHandler;
// Если Web-браузер – не Internet Explorer
if (navigator.userAgent.indexOf("MSIE") == -1)
{
// Объявление блока прослушивания для события
// изменения атрибута элемента startButton
document.getElementById(
"startButton").addEventListener(
"DOMAttrModified", attrModHandler, false);
// Объявление блока прослушивания для события
// изменения текстового содержимого
// элемента startButton
document.getElementById("
startButton").addEventListener(
DOMCharacterDataModified", dataModHandler, false);
}
}
Эта функция вызывается в элементе body при загрузке Web-страницы:
<body onload="startButtonEventHandlers()">
Функция clickHandler() выполняет обработку событий мыши для кнопки startButton:
function clickHandler(evt)
{
// Получение элемента startButton
startElement = document.getElementById("startButton");
// Изменение цвета надписи кнопки
startElement.style.color = "red";
// Если Web-браузер – Internet Explorer или Safari
if (navigator.userAgent.indexOf("MSIE")!= -1 ||
navigator.userAgent.indexOf("Safari")!= -1)
// Вызов функции attrModHandler()
attrModHandler(null, "DOMAttrModified",
"color:green;font-weight:bold",
"color:red;font-weight:bold", "style", 1);
// Изменение текста надписи на кнопке
startElement.firstChild.nodeValue = "Стоп";
// Если Web-браузер – Internet Explorer
if (navigator.userAgent.indexOf("MSIE")!= -1)
// Вызов функции dataModHandler()
dataModHandler(null, "DOMCharacterDataModified",
"Старт", "Стоп");
}
Функция attrModHandler() выполняет обработку события изменения значения атрибута элемента button в Firefox и Opera (в Internet Explorer и Safari эта функция при изменении атрибута вызывается явно):
|
|
|
function attrModHandler(evt, type, prevValue,
newValue, attrName, attrChange)
{
// Если Web-браузер – не Internet Explorer
// и не Safari
if (navigator.userAgent.indexOf("MSIE") == -1 &&
navigator.userAgent.indexOf("Safari") == -1)
{
// Определение типа события
type = evt.type;
// Определение старого значения
prevValue = evt.prevValue;
// Определение нового значения
newValue = evt.newValue;
// Определение имени атрибута
attrName = evt.attrName;
// Определение вида изменения
attrChange = evt.attrChange;
}
// Вывод значений свойств события
alert("type=" + type + "\nprevValue='" +
prevValue + "'\nnewValue='" + newValue +
"'\nattrName=" + attrName +
"\nattrChange=" + attrChange);
}
Функция dataModHandler() выполняет обработку события изменения значения текстового содержимого элемента button в Firefox, Opera и Safari (в Internet Explorer эта функция при изменении текстового содержимого вызывается явно):
function dataModHandler(evt, type, prevValue, newValue)
{
// Если Web-браузер – не Internet Explorer
if (navigator.userAgent.indexOf("MSIE") == -1)
{
// Определение типа события
type = evt.type;
// Определение старого значения
prevValue = evt.prevValue;
// Определение нового значения
newValue = evt.newValue;
}
// Вывод значений свойств события
alert("type=" + type + "\nprevValue='" +
prevValue + "'\nnewValue='" + newValue + "'");
}
В результате нажатия на кнопку startButton в Web-странице Web-браузера Opera будут выведены следующие сообщения:
| 
|
В остальных Web-браузерах вывод будет иметь аналогичный вид (за исключением того, что в Firefox неверно реализована обработка события DOMAttrModified, вследствие чего свойства prevValue и newValue имеют одинаковые значения).
