Input 控件的Onchange 与onBlur 事件区别？

Posted 2023-05-06

onchange虽然是控件值变化出发的事件，但前提是焦点离开该控件，如果焦点仍在控件上而值变化时，是不会触发的，也就是说，在焦点离开控件且值发生变化时，该事件触发onblur只要焦点离开就触发，不管值有没有变化至于两者哪个先执行，倒没有测试过，你可以试一下 参考技术A onchange是当控件的值发生变化触发,就是2次值不一样就触发onblur是控件失去焦点，也就是你的光标不在这个控件中触发 参考技术B Onchange：输入内容就触发,也就是焦点还没失去的时候，更改内容，要结合AutoPostBack 属性使用
onBlur：失去焦点的时候就触发本回答被提问者采纳 参考技术C onchange是当控件的值发生变化时激活
onblur是鼠标焦点离开控件，比如选中别的控件 参考技术D onblur 事件会在对象失去焦点时发生。

onchange 事件会在域的内容改变时发生。

参考资料：http://www.w3school.com.cn/htmldom/event_onchange.asp

常用js总结(补：2016-09-21)

1. 自定义方法：

2. 用js手动触发onchange方法

　　　用js给input框赋值后，默认不会触发input框的onchange方法，此时可以用js手动触发

<input type="text" onchange=‘test()‘ onblur="CheckData(this)"/>

<script type="text/javascript">
   
        //校验数据格式是否正确
        function CheckData(obj){
    
            var val = obj.value;
            if(val != ""){
                //小数点前最多12位，小数点后1-2位
                var reg = new RegExp(/^\d{0,12}(\.\d{1,2})?$/);
                var result = reg.test(val);
                if(!result){//不符合格式的数据
                    obj.value = "";
                    obj.onchange();//手动触发onchange方法
                }
            }
        }

        //测试onchange方法是否执行
        function test(){

            alert("onchange方法执行了");

        }
 
</script>