onchange事件与onpropertychange事件的区别

最新推荐文章于 2024-06-25 20:40:13 发布

rrz634171

最新推荐文章于 2024-06-25 20:40:13 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/rrz634171/article/details/39343349

本文详细解析了 onchange、onpropertychange 和 oninput 事件的区别，并探讨了它们在不同浏览器中的表现及失效情况，提供了实用的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、onchange事件与onpropertychange事件的区别：
onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange事件却是实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。
2、oninput事件与onpropertychange事件的区别：
oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变 value时，却不会触发；onpropertychange事件是任何属性改变都会触发的，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离）
3、oninput与onpropertychange失效的情况：
（1）oninput事件：a). 当脚本中改变value时，不会触发；b). 从浏览器的自动下拉提示中选取时，不会触发。
（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。

可以通过写定时器解决问题
在IE中的效果：

在FireFox中的效果：

另外，我还在google Chrome测试也成功了（跟fireFox一样的）。
HTML代码

< table >
         < tr >
                     < td >此处值通过js设置： </td>
                     < td > < input id ="jsUserName" type ="text" name ="jsUserName" readonly /> </td>
             </tr>
             < tr >
                         < td >此处输入值： </td>
                         < td > < input id ="userName" type ="text" name ="userName" /> </td>
             </tr>
</table>

Javascript代码

$( function()
                {
                         var jsUserName = "";
                         if($.browser.msie)         // IE浏览器
                        {
                                $( "#userName").get(0).onpropertychange = setJsUserName;
                                $( "#jsUserName").get(0).onpropertychange = handle;
                        }
                         else         // 其他浏览器
                        {
                                 var intervalName;         // 定时器句柄
                                $( "#userName").get(0).addEventListener( "input",setJsUserName, false);
                                 // 获得焦点时，启动定时器
                                $( "#userName").focus( function(){
                                        intervalName = setInterval(handle,1000);
                                });

                                 // 失去焦点时，清除定时器
                                $( "#userName").blur( function()
                                {
                                        clearInterval(intervalName);
                                });
                        }
                         // 设置jsUserName input的值
                         function setJsUserName()
                        {
                                $( "#jsUserName").val($( this).val());
                        }
                         // jsUserName input的值改变时执行的函数
                         function handle()
                        {
                                 // IE浏览器此处判断没什么意义，但为了统一，且提取公共代码而这样处理。
                                 if($( "#jsUserName").val() != jsUserName)
                                {
                                        $( "#toolTip").remove();
                                        $( "#jsUserName").parent().append( "<span id='toolTip'>看到这里的信息表明，通过js改变input的值也能响应相应事件：<span    style='color:red;'>" + $( "#jsUserName").val() + "</span></span>");
                                        jsUserName = $( "#jsUserName").val();
                                }
                        }
});

说明：为了方便，js代码使用了jQuery。不使用是一样的。
另外，考虑性能问题，可以考虑何时启动定时器和清除定时器以及定时器延时时间。

总结：