DOMAttrModified doesn't fire

Question

I'm trying to trigger an event handler when a script modifies an input element (text field.) On Internet Explorer, I can use the onpropertychange event, but on Firefox and other browsers there is no such event. So, according to the W3C docs, it seems the DOMAttrModified event does exactly what I want. But it doesn't fire in Firefox 11.

Here's a simple code snippet which reproduces the problem. I have an input text field, and a button which adds a character to the value attribute of the input text field. Clicking on the add char button should cause the DOMAttrModified event to fire:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function addChar() {
                var q = document.getElementById("query");
                q.value += "X";
            }

            function loadevents() {
                var q = document.getElementById("query");
                q.addEventListener("DOMAttrModified", function() {alert("DOMAttrModified event!");
                }, false);
            }
        </script>
    </head>
    <body onLoad="loadevents()">
        <input type="text" id="query">
        <br>
        <input type="submit" value="add char" onclick="addChar()">
    </body>
</html>

But it doesn't. Any idea what I'm doing wrong? (I know that DOM Level 3 deprecates this event, but there doesn't seem to be a viable alternative right now. As far as I know, Firefox 11 still supports it.)

score 7 · Accepted Answer · edited May 23 '17 at 11:45

7

Changing the value in an input doesn't fire the DOMAttrModified event, that's all..

You need to change the attribute of the input node, not the property of the variable.
It's like the difference between the two jQuery functions: .prop and .attr

Read:

edited May 23 '17 at 11:45

Community

1
1

answered May 02 '12 at 17:28

gdoron

147,333
58
291
367

The discussion you linked to is talking about modifying the `value` attribute through *user input* (i.e. physical typing on the keyboard), not through a script. Unless I'm totally misunderstanding the W3C docs, the `DOMAttrModified` event is supposed to be fire if an attribute is modified through a script. – Channel72 May 02 '12 at 17:31
@Channel72. You need to change the **attribute** of the input node, not the **property** of the element var. It's like the difference between the jQuery functions: `.prop` and .`attr` – gdoron May 02 '12 at 17:32
Is there any event I can use that will be triggered if a script modifies the `value` property? – Channel72 May 02 '12 at 17:34
@Channel72. No there is no such event. Sorry! – gdoron May 02 '12 at 17:35

score 2 · Answer 2 · edited May 23 '17 at 12:18

2

(repeating my answer from Which HTMLElement property change generates DOMAttrModified? here, because it's relevant to this question):

Please also note that NO DOMAttrModified events will be fired when the 'disabled' attribute is set. So if your event is not firing, that could be the reason. This also goes for the IE-only 'onPropertyChange' event.

edited May 23 '17 at 12:18

Community

1
1

answered Nov 19 '12 at 19:26

jenming

809
7
8

DOMAttrModified doesn't fire

2 Answers2