Main Page

Mutation events

<script type=”text/javascript”>
window.onscroll = function () {
var oWatermark = document.getElementById(“divWatermark”); = document.body.scrollTop;
<p>Try scrolling this window.</p>
<div id=”divWatermark” style=”position: absolute; top: 0px; right: 0px;
color: #cccccc; width: 150px; height: 30px; background-color: navy”>Watermark</div>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
<p>Line 6</p>
<p>Line 7</p>
<p>Line 8</p>
<p>Line 9</p>
<p>Line 10</p>
<p>Line 11</p>
<p>Line 12</p>
In this example, a
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
event handler that moves the watermark equal to the
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:
— fires when the subtree of a document or element is modified by
either adding or removing nodes
— fires when a node is inserted as a child of another node
— fires when a node is removed as a child of another node
— fires when a node is removed from a document
— 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).
All about Events
12_579088 ch09.qxd 3/28/05 11:39 AM Page 291

JavaScript EditorFree JavaScript Editor     Ajax Editor