JavaScript 实时监听 input 输入框中值的变化

onkeydown、onkeyup、onclick、onchange、oninput、onpropertychange 的用法和区别
onkeydown、onkeyup、onclick
onkeydown 是按键按下时触发；
onkeyup 是按键弹起时触发；
onclick 是按键按下并弹起时触发。

有一种情况，就是按住按键不放，此时会不断地触发 onkeydown，但 onkeyup、onclick 只是在抬起按键的时候触发一次。

要实时检测正在输字的文本框中输入了多少文字，怎么办？
用 onkeyup 不可取！

如果按住按键不放，文字会一直输进去，可是 onkeyup 只触发一次。况且如果不是按键，是鼠标右键粘贴怎么办？

用 onkeydown 不可取！

onkeydown 虽然会不断地触发，但是在它触发的时候，文字还没有输入进去。

oninput, onpropertychange, onchange 的用法

onchange 触发事件必须满足两个条件：
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；

onpropertychange 的话，只要当前对象属性发生改变，都会触发事件

oninput 是 onpropertychange 的非 IE 浏览器版本，支持 firefox 和 opera 等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象 value 值发生改变时奏效。

oninput、onpropertychange 是为了弥补 onchange 的缺陷产生的

oninput 是 Chrome 支持的，onpropertychange 是 IE 支持的。

使用 keydown keypress keyup change 等事件，都不能实时监听input输入框的变化，尤其是在手机上使用中文输入法的时候，所以这时候需要用到 2 个事件 - “onchange ，onpropertychange ”。

jQuery

$('body').on('input propertychange', '#id_q', function () {
      // do something
});

原生 javascript 方法

function $(id) {
     return document.getElementById(id);
}

$('id_q').addEventListener('input', function () {
     // do something
});

$('id_q').addEventListener('propertychange', function () {
    // do something
});