以往我們實現input的輸入監聽用到的無非是onkeyup、onkeydown、onchange，但是這些都有着一些不好的用戶體驗。比如onchange事件只在鍵盤或者鼠標操作改變對象屬性，且失去焦點時觸發，腳本觸發無效；而onkeydown、onkeyup在處理復制、粘貼、拖拽、長按鍵（按住鍵盤不放）等細節上並不完善。
onpropertychange屬性可在某些情況下解決上面存在的問題，不用考慮是否失去焦點，不管js操作還是鍵盤鼠標手動操作，只要HTML元素屬性發生改變即可立即捕獲到。遺憾的是，onpropertychange為IE專屬的。其他瀏覽器下如果想要實現這一實時監聽的需求，就要用到HTML5中的標准事件oninput，不過IE9以下的瀏覽器是不支持oninput事件的。如果要兼容IE9以下瀏覽器，就需要oninput和onpropertychange一起使用。
如下實例：
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="神棍、Falost">
<title>hello world!</title>
<style type="text/css">
#box{
width:100%;
height:30px;
}
</style>
</head>
<body>
<div id="box"></div>
<input type="text" oninput="Monitor(this)" onpropertychange="Monitor(this)"/>
<script type="text/javascript">
function Monitor(t){
console.log(t.value)
var box = document.getElementById('box')
box.innerHTML = '你當前輸入的是：'+ t.value
}
</script>
</body>
</html>
實時監聽input中輸入內容的變化。