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

You are here: Reference > JavaScript > client-side > event handling > methods > initMutationEvent (event)

initMutationEvent method (event)

Browser support:

9

Initializes an event object created by the createEvent method with type of 'MutationEvent'.

An event object created by the createEvent method with type of 'MutationEvent' implements the MutationEvent interface.
After initialization, the event can be dispatched with the dispatchEvent method.

In Internet Explorer before version 9, use the createEventObject method to create a new event object and the fireEvent method to dispatch it.

Syntax:

object.initMutationEvent (eventName, bubbles, cancelable, relatedNode, prevValue, newValue, attrName, attrChange);

You can find the related objects in the Supported by objects section below.

Parameters:

eventName

Required. String that specifies the name (type) of the event to initialize.

This parameter is case sensitive! Sets the type property of the event object. For a complete list of events, see the page for Events in JavaScript. The initMutationEvent method is appropriate for initialization of MutationEvent types principally, for other events, use the type-specific initialization methods.

Note: custom event names are also allowed.
Events represented by the MutationEvent interface:

DOMAttrModified

DOMCharacterDataModified

DOMNodeInserted

DOMNodeInsertedIntoDocument

DOMNodeRemoved

DOMNodeRemovedFromDocument

DOMSubtreeModified

bubbles

Required. Boolean that specifies whether the event can bubble or not. Sets the bubbles property of the event object.

One of the following values:

false

The event cannot bubble up.

true

The event can bubble up.

cancelable

Required. Boolean that specifies whether the event can be canceled or not. Sets the cancelable property of the event object.

One of the following values:

false

The event cannot be canceled.

true

The event can be canceled.

relatedNode

Required. Reference to the node on which the mutation event occurred. Sets the relatedNode property of the event object.

prevValue

Required. String that specifies the previous value of the modified node. Sets the prevValue property of the event object.

newValue

Required. String that specifies the current value of the modified node. Sets the newValue property of the event object.

attrName

Required. String that specifies the name of the modified attribute. Sets the attrName property of the event object.

attrChange

Required. Integer that specifies the type of the action that modified the attribute. Sets the attrChange property of the event object.

Predefined constants are available for the possible values of this parameter, in the scope of the MutationEvent interface. You can use them directly through the MutationEvent interface (MutationEvent.MODIFICATION) or through an instance of the event object. For further details, please see the page for the MutationEvent interface.

The value can be one of the following values (the value of a predefined constant appears in parentheses after the constant):

MODIFICATION (1)

Modification action occurred.

ADDITION (2)

Addition action occurred.

REMOVAL (3)

Removal action occurred.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the initMutationEvent method:

<head>
    <script type="text/javascript">
        function InitListener () {
            var input = document.getElementById ("myInput");
            if (input.addEventListener) {
                    // Firefox, Opera, IE from version 9
                input.addEventListener ('DOMAttrModified', OnAttrModified, false);
            }
        }

            // When the value of the input field is changed, generate a DOMAttrModified event
        function OnInput (input) {
            var attr = input.getAttributeNode ("value");
            var eventObject = document.createEvent('MutationEvent');
            eventObject.initMutationEvent ("DOMAttrModified", true, true, attr, null, input.value, "value", MutationEvent.MODIFICATION);
            input.dispatchEvent(eventObject);
        }

        function OnAttrModified (event) {
            alert ("The " + event.attrName + " property of the " + event.target.tagName 
                        + " element is changed to:\n" + event.newValue);
        }
    </script>
</head>
<body onload="InitListener ();">
    Please modify the contents of the input field<br />
    <input id="myInput" oninput="OnInput (this)" />
</body>