onchange、onpropertychange、oninput和onblur

一、onchange发生有两个条件：

1、元素的属性（value）改变了；

2、元素失去焦点。

注：通过js修改元素的value不能触发onchange，只能通过键盘和鼠标修改的才有效。

二、onpropertychange是实时触发的，value（其他属性也可以，包括大小位置等）一旦改变，无论是通过键盘鼠标还是js改变都会触发，只适用于IE。

注：在IE9下无法响应退格键（Backspace），不知是不是bug。

三、oninput是非IE版的onpropertychange，但是只在value改变时触发，其他属性无效。

四、onblur在元素失去焦点时触发，但是只能和onchange一起应用而不能和onpropertychange同时应用，否则，每触发一次onpropertychange之前都会触发一次onblur。

以下是一个来自论坛上例子：

<script type="text/javascript">
function change(){
    alert("dd");
}
function clk(){
    var selOption=document.getElementById("select");
    selOption.selectedIndex=2;
}
</script>

<input type="button" οnclick="clk()" value="click" />
<select name="select" id="select"  onpropertychange="change()">
<option>aa</option>
<option>bb</option>
<option>cc</option>
</select>

楼主通过鼠标点击改变选项时可以触发onchange从而调用change函数，但是通过点击按钮则无反应。将onchange改为onpropertychange则有效，这正说明了上面的第一点和第二点。但是这只在IE下有效，在Firefox下可以采用“人为触发”的方式，如下：

<script type="text/javascript">
function change(){
    alert("dd");
}
function clk(){
    var selOption=document.getElementById("select");
    selOption.selectedIndex=2;
    selOption.onchange();     //当点击按钮时会强硬触发onchange事件
}
</script>

<input type="button" οnclick="clk()" value="click" />
<select name="select" id="select"  οnchange="change()">
<option>aa</option>
<option>bb</option>
<option>cc</option>
</select>