javascript

Chapter 12: Events
value of the node, and newValue , which is the new value for the node. After that, the
DOMSubtreeModified event fires on the text node that was changed. Consider the following
HTML page:
< html >
< head >
< title > Text Change Events Example < /title >
< /head >
< body >
< div id=”myDiv” > Hello world! < /div >
< /body >
< /html >
If you change the text contained in the < div > element, the DOMCharacterDataModified event fires on
the text node containing “ Hello world! ” . Then the DOMSubtreeModified event fires on the text node.
The following code illustrates this:
EventUtil.addHandler(window, “load”, function(event){
var div = document.getElementById(“myDiv”);
EventUtil.addHandler(document, “DOMSubtreeModified”, function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, “DOMCharacterDataModified”, function(event){
alert(event.type);
alert(event.target);
alert(event.prevValue); //”Hello world!”
alert(event.newValue); //”Some new text”
});
});
div.firstChild.nodeValue = “Some new text”;
Since both DOMCharacterDataModified and DOMSubtreeModified events bubble, the event handlers
are attached to the document . The DOMCharacterDataModified event fires immediately after the text
value has changed. On the event object, prevValue is “ Hello world! ” and newValue is “ Some new
text ” . After that, DOMSubtreeModified fires on the text node that just changed.
Proprietary Events
The DOM specification doesn ’ t cover all events that are supported by all browsers. Many browsers have
implemented custom events for various purposes either based on user need or a specific use case. These
events may not be supported across all browsers but are useful enough to mention.
The contextmenu Event
Windows 95 introduced the concept of context menus to PC users via a right mouse click. Soon, that
paradigm was being mimicked on the Web. The problem developers were facing was how to detect that
a context menu should be displayed (in Windows, it ’ s a right - click; on a Mac, it ’ s a Ctrl+click), and then
how to avoid the default context menu for the action. This resulted in the introduction of the
407