【javascript基础】之【onpropertychange、onchange、oninput】

onpropertychange

IE下特有的事件，解释：

”当一个HTML元素的属性改变的时候，都能通过onpropertychange来捕获。“

<input type="text" id="username" /><br />

<input type="text" id="pwd" />

<script>

var us = document.getElementById("username");

var pwd = document.getElementById("pwd");

us.attachEvent("onpropertychange", function(){

    alert(11);    

});



/*pwd.attachEvent("onchange", function(){

    alert(22);    

});*/



setTimeout(function(){

    us.name = "username";    

}, 1000);

</script>

 

我做了一个测试，任何一个属性改变时，添加、改变、删除，都会促发这个事件。

oninput

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

<input type="text" id="username" /><br />
<input type="text" id="pwd" />
<script>
var us = document.getElementById("username");
var pwd = document.getElementById("pwd");
us.addEventListener("input", function(){
    console.log(11);    
}, false);

/*pwd.attachEvent("onchange", function(){
    alert(22);    
});*/

setTimeout(function(){
    us.name = "username";    
}, 1000);
</script>

但是运行上面的实例，

us.name = "username";

竟然不促发input，我日

 

 

当 JS 改变 value 值或从浏览器的自动下拉提示中选值时，不会触发。

 

 

 

 

onchange

  onchange在属性值改变时只有通过鼠标执行某些操作才能激活该事件

 

 

参考了

http://www.planabc.net/2011/10/18/oninput_and_onpropertychange/

http://www.cnitblog.com/yemoo/archive/2006/08/19/15585.aspx