↑
Main Page

Mutation events

window.onscroll = function () {

var oWatermark = document.getElementById(“divWatermark”);

oWatermark.style.top = document.body.scrollTop;

}

</script>

</head>

<body>

Try scrolling this window.

<div id=”divWatermark” style=”position: absolute; top: 0px; right: 0px;

color: #cccccc; width: 150px; height: 30px; background-color: navy”>Watermark</div>

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Line 11

Line 12

</body>

</html>

In this example, a

<div/>

specified with absolute positioning is the watermark. It starts out at the top of

the page, and as the window scrolls, it must stay there. To handle this, a simple piece of code is added to

the

onscroll

event handler that moves the watermark equal to the

scrollTop

property, which has the

effect of always keeping it in the upper-right corner of the window.

Mutation events

Mutation events, although part of the DOM standard, have yet to be implemented in any major browser.

As such, the following information is intended to provide a brief look into what the standard defines

and not to discuss how these events might be used.

The mutation events include the following:

DOMSubtreeModified

— fires when the subtree of a document or element is modified by

either adding or removing nodes

DOMNodeInserted

— fires when a node is inserted as a child of another node

DOMNodeRemoved

— fires when a node is removed as a child of another node

DOMNodeRemovedFromDocument

— fires when a node is removed from a document

DOMNodeInsertedIntoDocument

— fires when a new node is inserted into a document

The purpose of these events is to provide a language-independent event paradigm for use in all XML-

based languages (such as XHTML, SVG, and newer languages like MathML).

291

All about Events

12_579088 ch09.qxd 3/28/05 11:39 AM Page 291