javascript

Chapter 12: Events
Safari 3 and Chrome have bugs that cause DOMNodeRemoved to be fired twice in a
row on the same node.
Node Insertion
When a node is inserted into the DOM using appendChild() , replaceChild() , or insertBefore() ,
the DOMNodeInserted event is fired first. The target of this event is the inserted node, and the
event.relatedNode property contains a reference to the parent node. At the point that this event fires,
the node has already been added to the new parent. This event bubbles, so the event can be handled at
any level of the DOM.
Next, the DOMNodeInsertedIntoDocument event fires on the newly inserted node. This event doesn ’ t
bubble, so the event handler must be attached to the node before it is inserted. The target of this event is
the inserted node, and the event object provides no additional information.
The last event to fire is DOMSubtreeModified , which fires on the parent node of the newly
inserted node.
Considering the same HTML document used in the previous section, the following JavaScript code
indicates the order of events:
EventUtil.addHandler(window, “load”, function(event){
var list = document.getElementById(“myList”);
var item = document.createElement(“li”);
item.appendChild(document.createTextNode(“Item 4”));
EventUtil.addHandler(document, “DOMSubtreeModified”, function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, “DOMNodeInserted”, function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(item, “DOMNodeInsertedIntoDocument”, function(event){
alert(event.type);
alert(event.target);
});
});
list.appendChild(item);
This code begins by creating a new < li > element containing the text “ Item 4 ” . The event handlers for
DOMSubtreeModified and DOMNodeInserted are added to the document since those events bubble.
Before the item is added to its parent, an event handler for DOMNodeInsertedIntoDocument is added
to it. The last step is to use appendChild() to add the item, at which point the events begin to fire.
The DOMNodeInserted event fires on the new < li > item, and the relatedNode is the < ul > element.
Then DOMNodeInsertedIntoDocument is fired on the new < li > item, and lastly the
DOMSubtreeModified event is fired on the < ul > element.
405