js中oninput & onpropertychange的详解

传统对于文本框（input）的输入可通过键盘的 onkeydown / onkeypress / onkeyup 来监测，但在处理较多细节时存在诟病比如： cut（剪切） / paste（复制） / undo（撤销） / redo（重做） / drag & drop（拖拽）/ 输入法等。

而 oninput & onpropertychange 事件基本可以解决上面的诟病：
oninput 事件作为 HTML5 中的标准事件，基本除了IE6 / IE7 / IE8 外的最新浏览器均支持（注：1、原先的 Opera 的虽支持，但依然存在部分传统的诟病，从 Opera 11+ 开始，已修复，更加完美；2、IE9 也支持）。

function(input, callback){
    if ("onpropertychange" in input) { //IE6/IE7/IE8
        input.onpropertychange = function(){
            if (window.event.propertyName == "value"){
                callback.call(this, window.event)
            }
        }
    } else {
        // Fix Firefox Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=195696
        input.addEventListener("input", callback, false);
    }
}

提示：

oninput 事件：当 JS 改变 value 值或从浏览器的自动下拉提示中选值时，不会触发。
onpropertychange 事件：当 input 设置为不可用（disable=true）时，不会触发。