You are here: Reference > JavaScript > client-side > event handling > events > DOMCharacterDataModified

DOMCharacterDataModified event

Browser support:
Fires when a script changes the value of a TextNode.
You can use the newValue and prevValue properties of the external object to get the current and previous contents of the TextNode.
Note that the newValue property is always empty in Firefox (see the example below).
There is not a similar event for text nodes in Internet Explorer before version 9.

How to register:

This event cannot be registered in HTML.

In JavaScript:
object.addEventListener ("DOMCharacterDataModified", handler, useCapture);
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 DOMCharacterDataModified event:

Example HTML code 1:

This example illustrates the use of the DOMCharacterDataModified event:
    <script type="text/javascript">
        function InitListener () {
            var container = document.getElementById ("textContainer");
            var textNode = container.firstChild;
            if (textNode.addEventListener) {
                textNode.addEventListener ('DOMCharacterDataModified', OnCharacterModified, false);

        function DeleteData () {
            var container = document.getElementById ("textContainer");
            var textNode = container.firstChild;
            if (textNode.length >= 2)
                textNode.deleteData (0,2);

        function OnCharacterModified (event) {
            var currentValue = event.newValue;
            if (currentValue != {
                alert ("The value of the newValue property is incorrect!");     // Firefox
                currentValue =;
            alert ("The contents of the text node have changed from '"
                    + event.prevValue + "' to '" + currentValue + "'.");
<body onload="InitListener ();">
    <div id="textContainer">Some text content for testing.</div>
    <br />
    <button onclick="DeleteData ();">Delete the first to character from the text above!</button>
Did you find this example helpful? yes no

Related pages:

External links:

User Contributed Comments

Post Content

Post Content