手动触发JS事件

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

获得焦点；
值发生改变；
注: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();
});