js手动触发这个 onchange 事件

柔光的暖阳◎ 2021-06-24 15:59 750阅读 0赞

input type=txt 这个组件触发change事件，需要同时满足两个条件：

1.  获得焦点；
2.  值发生改变；

注:select这类组件只要值改变即可触发change事件；

下面介绍一个实际例子：在一个页面中，引入了my97时间空间，对该input type=txt组件添加change时间，当使用my97改变数据后，发现无法触发change时间。猜测是由于失去focus造成，所以需要用js来手动触发change时间。

有两种方法可以做到这一点。 如果 onchange 侦听器是通过 element.onchange 属性设置的函数，并且你不关心事件对象或者冒泡/传播，那么最简单的方法就是调用该函数：

element.onchange();

如果你需要它来模拟真实事件，或者通过html属性或者 addEventListener/attachEvent 设置事件，你需要做一些特性检测来正确触发事件：

if ("createEvent" in document) {
     var evt = document.createEvent("HTMLEvents");
     evt.initEvent("change", false, true);
     element.dispatchEvent(evt);
    }
    else
     element.fireEvent("onchange");

这里面也有个例子，js触发input onchange事件：

<input name="txt" type="text" id="txt" οnchange="txtChange()"/>
    < input type="submit" name="Submit" value="点击我,让文本框获取焦点，同时触发onchange事件" οnclick="clickMe()"/>
    < script>
    function clickMe()
    {
            var o=document.getElementById("txt");
            o.focus();
            o.value="hello world!";//自动赋值以后文本框已经change，理论上要发生onchange事件
            //但是如果不加以下这句是不会触发onchange事件的
            o.fireEvent("onchange");
    }
    function txtChange()
    {
            alert("同时触发了onchange事件");
    }

注意：由于chrome不支持fireEvent这个函数，所以一般采用下面这个兼容方式

好了，最后把my97这个示例代码附上：

<input type="text" class="input-text Wdate" name="hourT1" id="hour_t1" οnfοcus="initMy97(this);">
    function initMy97(_this) {  
        WdatePicker({
        	dateFmt: 'yyyy-MM-dd', 
        	isShowToday: true, 
        	isShowClear: false,
        	readOnly: true,
        	onpicking:function(dp){
        		var o=document.getElementById(_this.id);
                o.focus();
                o.value=dp.cal.getNewDateStr();//自动赋值以后文本框已经change，理论上要发生onchange事件,但是如果不加以下这句是不会触发onchange事件的
                if ("createEvent" in document) {
    				var evt = document.createEvent("HTMLEvents");
    			 	evt.initEvent("change", false, true);
    			 	o.dispatchEvent(evt);
    			} else {
    			 	o.fireEvent("onchange");
    			}
        	}
        });  
    }
    
    $('#hour_rpage,#hour_platform,#hour_recType,#hour_userType,#hour_userGrup,#hour_t1,#hour_t2').change(function () {
    	getHourChart();
    });