The "DOMControlValueChanged" event fires whenever a form control's value *changes* (as in, modified to a *different* value).

The "input" event is a user-initiated-filtered version of DOMControlValueChanged. The "input" event fires whenever a user action triggers a "DOMControlValueChanged" event.

Some examples of actions that *can be* user-initiated are: cut, paste, undo, redo, clear, reset, delete, drag-n-drop, user-initiated spellchecker correction, keypress, keydown and keyup etc. (The type of input device the user uses to initiate the action doesn't matter.)

(Is clicking on <input type="reset"> or initiating a spellcheck correction user-initiated enough (I think so). Or, should those only be fired with DOMControlValueChanged? If so, then perhaps it should be specified that the user-initiated action must happen directly on the element.)

An example of a change that is not user-initiated would be a script changing the value of a textarea on load.

The events must fire exactly once for each change.

Some elements that can trigger the "input" event are: textarea, select and input (including type="checkbox" even though its .value always returns 'on').

A "DOMControlValueChanged" event can be attached using addEventListener():

var ta = document.createElement("textarea");
ta.addEventListener("DOMControlValueChanged", function(e) {
    alert(e.target);
}, false);

An 'input' event listener can be attached in several ways:

1.

var ta = document.createElement("textarea");
ta.addEventListener("input", function(e) {
    alert(e.target);
}, false);

2.

var txt = document.createElement("input");
txt.oninput = function(e) {
    alert(e.target);
};

3.

<select oninput="alert(event.target)">
    <option value="">Change me</option>
    <option value="Pick me">Pick me</option>
</select>

The events bubble, but are not cancelable.