js手动触发这个 onchange 事件

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" onchange="txtChange()"/>
< input type="submit" name="Submit" value="点击我,让文本框获取焦点,同时触发onchange事件" onclick="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这个函数,所以一般采用下面这个兼容方式

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

好了,最后把my97这个示例代码附上:

<input type="text" class="input-text Wdate" name="hourT1" id="hour_t1" onfocus="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();
});
相关文章
相关标签/搜索