JS判断文本框内容改变事件的简单实例

oninput、onpropertychange与onchange事件区别

oninput、onpropertychange与onchange三种事件在JavaScript中的用法解析

onchange事件的触发需要同时满足两个条件：

a）当前对象的属性发生变化，且该变化是由键盘输入或鼠标操作直接引发的（通过脚本代码修改属性不会触发）；

b）当前对象失去焦点（即触发onblur事件）；

onpropertychange事件则在当前对象任何属性发生改变时都会立即触发，但该事件仅适用于IE浏览器；

oninput是onpropertychange在非IE浏览器（如Firefox、Opera等）中的对应实现。需要注意的是，oninput在绑定到对象时，并非所有属性变更都会触发事件，它仅在对象的value值发生变化时才生效。

阻止事件冒泡的方法

阻止事件冒泡的处理方法

if (e) { e.stopPropagation(); } else { window.event.cancelBubble = true; }

执行上述代码后，点击输入框会触发onpropertychange事件，输入内容同样会触发该事件。这证实了只要对象属性值被修改，就会触发此事件。

onpropertychange参数分析与propertyName属性应用

第二点：既然我们发现了这一特性，就会引出一个问题：当我们在输入框值改变时希望执行某个函数操作，但同时又要修改一个自定义属性，此时onpropertychange会被触发两次，这通常不是我们期望的结果。 试想一下，既然提供了这样一个属性，应该能够获取到具体是哪个属性发生了改变。我们可以尝试检查回调函数的参数个数及内容。

XML/HTML代码示例

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
alert(arguments.length);
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}   
});   
-->  
</script>

执行上述代码后，会弹出数字1和[object]，这说明该事件只向回调函数传入了一个参数，且该参数为object类型。

接下来我们尝试遍历这个object对象。

XML/HTML代码示例

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
for(var item in o){
alert(item+":"+o[item]);
}   
});   
//-->  
</script>

执行后，会发现输出多个属性。仔细观察可能会发现一个名为propertyname的属性，顾名思义，该属性用于标识具体是哪个属性被修改了。

XML/HTML代码示例

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
alert(o.propertyName);
});   
//-->  
</script>

分别单击文本框和输入一个值，会分别弹出myprop和value。

回到最初的问题，我们只需判断是否是value属性被改变即可。 直接查看最终代码：

XML/HTML代码示例

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--   
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; //如果不是value属性改变，则不执行后续操作
//.......函数处理逻辑
});   
//-->  
</script>