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

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

DOMAttrModified event

Browser support:

9

Fires when an attribute is added, removed or when the value of an attribute is modified by script.

The value of an attribute can be modified directly by script, or indirectly through the user interface. For example, when the checked state of an input:checkbox element is modified, the CHECKED property is changed. The DOMAttrModified event is not fired if the modification was made through the user interface, only if it was made by script.

You can use the following properties of the external object in the event handlers for the DOMAttrModified event to get information about the modified attribute:

The attrChange property retrieves the type of the action that modified the attribute.
The attrName property retrieves the name of the modified attribute.
The prevValue and newValue properties retrieve the previous and current value of the modified attribute.
The relatedNode property retrieves a reference to the modified attribute node.

To get similar functionality in Internet Explorer before version 9, use the onpropertychange event. It fires when the value of a property is changed by script or through the user interface, but does not fire when a property is added or removed. See the page for the onpropertychange event or the example below for details.

How to register:

In HTML:

This event cannot be registered in HTML.

In JavaScript:

object.addEventListener ("DOMAttrModified", 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 DOMAttrModified event:

Changing the value of an attribute from JavaScript.
Adding or removing an attribute from JavaScript.

Example HTML code 1:

This example illustrates the use of the DOMAttrModified and onpropertychange events:

<head>
    <script type="text/javascript">
        function InitListener () {
            var elemToCheck = document.getElementById ("myDiv");
            if (elemToCheck.addEventListener) { // all browsers except IE before version 9
                elemToCheck.addEventListener ('DOMAttrModified', OnAttrModified, false);    // Firefox, Opera, IE
            }
            if (elemToCheck.attachEvent) {  // Internet Explorer and Opera
                elemToCheck.attachEvent ('onpropertychange', OnAttrModified);   // Internet Explorer
            }
        }

        function OnAttrModified (event) {
            var message = "";
            if ('attrChange' in event) {    // Firefox, Opera, Internet Explorer from version 9
                message += "Something has happened to an attribute of the " + event.target.tagName + " element.\n";
                switch (event.attrChange) {
                case MutationEvent.MODIFICATION:
                    message += "The value of the " + event.attrName + " attribute has been changed from "
                                + event.prevValue + " to " + event.newValue + ".";
                    break;
                case MutationEvent.ADDITION:
                    message += "The " + event.attrName + " attribute has been added to the element "
                                + "with the value of " + event.newValue + ".";
                    break;
                case MutationEvent.REMOVAL:
                    message += "The " + event.attrName + " attribute has been removed from the element."
                                + "The value was " + event.prevValue + " previously.";
                    break;
                };
            }

            if ('propertyName' in event) {  // Internet Explorer
                message = "The " + event.propertyName + " property of the "
                           + event.srcElement.tagName + " element has been changed.";
            }

            alert (message);
        }

        function ModifyAlign () {
            var elemToCheck = document.getElementById ("myDiv");
            if (elemToCheck.align == "right")
                elemToCheck.align = "left";
            else
                elemToCheck.align = "right";
        }

        function ModifyBackgroundColor () {
            var elemToCheck = document.getElementById ("myDiv");
            elemToCheck.style.backgroundColor = "#aaccee";
        }

        function CreateModifyRemoveAttr () {
            var elemToCheck = document.getElementById ("myDiv");
                // when an attribute is created, the onpropertychange event is not fired
            elemToCheck.setAttribute ("newAttr" , "firstValue");
                // when the value of an attribute is modified, the onpropertychange event is fired
            elemToCheck.setAttribute ("newAttr" , "secondValue");
                // when an attribute is removed, the onpropertychange event is not fired
            elemToCheck.removeAttribute ("newAttr");
        }
    </script>
</head>
<body onload="InitListener ();">
    <div id="myDiv" style="background-color:#e0c0a0;">
        The alignment can be modified with the first button<br />
        The background color can be changed with the second button<br />
        Finally, with the third button you can create, modify and remove an attribute.
    </div>
    <br /><br />
    <button onclick="ModifyAlign ();">Modify the alignment</button><br />
    <button onclick="ModifyBackgroundColor ();">Modify the color of the background</button><br />
    <button onclick="CreateModifyRemoveAttr ();">Create, modify and remove an attribute</button>
</body>