javascript开发中使用onpropertychange,oninput事件解决onchange事件的不足

onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点（onblur）时才会触发. 也就是没有即时性！

在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.

这样一来问题就解决了.

那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了.

但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效.

好了, 以下是演示例子, 主流浏览器都没问题:
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>on用onpropertychange,oninput事件解决onchange事件的不足 by koyoz.com</title> <style type="text/css"> *{font-size:14px;font-family:"Comic Sans MS", Verdana} body {margin-left:20px} </style> </head> <body> 使用onchange事件: <br/> <input type="text" id="txt1" /> 使用onpropertychange/oninput事件: <br/> <input type="text" id="txt2" /> 结果:<br/> <input type="text" id="txt" /> <script type="text/javascript"> var $ = function（o） { return document.getElementById（o） }; $（"txt1"）.onchange = function（） { $（"txt"）.value = this.value; } $（"txt2"）.onpropertychange = function（） { $（"txt"）.value = this.value; } if （window.addEventListener） { $（"txt2"）.addEventListener（"input", function（） {$（"txt"）.value = this.value}, false）; } </script> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]