DOMSubtreeModified event
| 9 | ||||
Fires on a node when a modification occurs in the subtree that belongs to it.
The DOMSubtreeModified event can be used instead of the other mutation events (DOMAttrModified, DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved and DOMNodeRemovedFromDocument).
Note that the DOMSubtreeModified event is buggy in Internet Explorer 9, it is not fired when a node is inserted for the first time.
See the example below for details.
How to register:
In HTML:
In JavaScript:object.addEventListener ("DOMSubtreeModified", handler, useCapture);
This event cannot be registered in HTML.
In JavaScript:
The event object is accessible to all event handlers in all browsers.
The properties of the event object contain additional information about the current event.
To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
| For a complete list of events, see the page for Events in JavaScript. |
Basic information:
| Bubbles | Yes |
| Cancelable | No |
| Event object | MutationEvent |
Actions that invoke the DOMSubtreeModified event:
- Adding or removing a descendant node.
- Adding, removing or modifying an attribute of a descendant node.
- Changing the value of a descendant TextNode.
Example HTML code 1:
This example illustrates the use of the DOMSubtreeModified event. The DOMSubtreeModified event is not fired in Internet Explorer 9 when a node is inserted for the first time.
|
|
||||
<head> <script type="text/javascript"> var container = null, textNode = null; function AddTextToContainer () { if (!textNode.parentNode) { container.appendChild (textNode); } } function RemoveTextFromContainer () { if (textNode.parentNode) { container.removeChild (textNode); } } function OnSubtreeModified () { alert ("The subtree that belongs to the container has been modified."); } function Init () { container = document.getElementById ("container"); if (container.addEventListener) { container.addEventListener ('DOMSubtreeModified', OnSubtreeModified, false); } textNode = document.createTextNode ("My text"); } </script> </head> <body onload="Init ()"> <div id="container" style="background-color:#e0d0a0; width:300px; height:100px;"></div> <br /><br /> <button onclick="AddTextToContainer ()">Insert the text into the container</button> <button onclick="RemoveTextFromContainer ()">Remove the text form the container</button> </body> |
||||
|
||||
|
Did you find this example helpful?
|
External links:
User Contributed Comments