In order to access this site you need to enable JavaScript!

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

DOMCharacterDataModified event

Browser support:

9

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:

In HTML:

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:

Changing the value of the data, nodeValue or textContent property of a TextNode.
Invoking the appendData, deleteData, insertData, replaceData or substringData method of a TextNode.

Example HTML code 1:

This example illustrates the use of the DOMCharacterDataModified event:

<head>
    <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 != event.target.data) {
                alert ("The value of the newValue property is incorrect!");     // Firefox
                currentValue = event.target.data;
            }
            
            alert ("The contents of the text node have changed from '"
                    + event.prevValue + "' to '" + currentValue + "'.");
        }
    </script>
</head>
<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>
</body>