js手動觸發dom事件

直接用inputdom.value='xx',賦值時，不觸發input的change事件（手動操做輸入時才觸發change事件），這裏須要在賦值後手動觸發input的change事件。

JavaScript手動觸發dom元素事件。

function FireEvent(elem, eventName)
{
    if(typeof(elem) == 'object')
    {
        eventName = eventName.replace(/^on/i,'');
        if (document.all)
        {//
            eventName = "on"+eventName;
            elem.fireEvent(eventName);
        }
        else
        {
            var evt = document.createEvent('HTMLEvents');
            evt.initEvent(eventName,true,true);
            elem.dispatchEvent(evt);
        }
    }

}

　　調用：

 FireEvent(document.getElementById('id'), 'change')　　

相關用法：

1.標準瀏覽器手動事件觸發實現過程（較舊的瀏覽器版本，建立、初始化、監聽和觸發）

// 建立事件.
var event = document.createEvent('Event');//事件類型可能包括, , , 或者 

// 初始化一個點擊事件，能夠冒泡，沒法被取消
event.initEvent('click', true, false);

// 設置事件監聽.
elem.addEventListener('click', function (e) {
  // e.target 就是監聽事件目標元素
}, false);

// 觸發事件監聽
elem.dispatchEvent(event);
"UIEvents""MouseEvents""MutationEvents""HTMLEvents"

　

事件模塊	傳遞給 createEvent的Event type	事件初始化方法
DOM Level 2 Events
User Interface event module	"UIEvents"	event.initUIEvent
Mouse event module	"MouseEvents"	event.initMouseEvent
Mutation event module	"MutationEvents"	event.initMutationEvent
HTML event module	"HTMLEvents"	event.initEvent

HTMLEvents（參考5，參考6）: load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll,
MouseEvents:click|dblclick|mouse(?:down|up|over|move|out)

2.IE事件手動觸發：

　IE瀏覽器用以替代EventTarget.dispatchEvent()的私有方法，與EventTarget.dispatchEvent()不一樣的是經過fireEvent() 觸發的事件不會觸發事件的默認行爲，例如，經過fireEvent()觸發<input type="checkbox">的點擊事件並不會切換checkbox的選中狀態

cancelled = target.fireEvent(eventNameWithOn, event)

　　

event.initEvent(type, bubbles, cancelable);

2.DOM3架構（參考3）

其餘解決方法： jquery事件直接調用：$('').val('xx').change()或$('').trigger('change')。 可參考http://www.qttc.net/201306342.html
jquery不是直接對dom元素操做事件，是將dom封裝成jq對象，使用這個對象來操做原始的dom事件，事件處理函數掛在jquery的緩存中，操做jq對象觸發事件時，去緩存上匹配查找而後回調相應的監聽器。

參考

1.MSN 手動觸發事件：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/initEvent

2.w3c事件（htmlevents等404？）：https://www.w3.org/TR/domcore/#event   

3.dom：https://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/introduction.html#ID-E7C30822

4.參考問題：https://stackoverflow.com/questions/2856513/how-can-i-trigger-an-onchange-event-manually/2856602#2856602

　　　　https://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript/2490876#2490876

5.Simulate HTMLEvent and MouseEvents cross-browser: https://github.com/stevoland/DOMTrigger.js

 6.JS中手動觸發事件的方法  https://www.cnblogs.com/jiangxiaobo/p/5830200.html

7.javascript自定義事件event：http://blog.allenm.me/2010/02/javascript自定義事件event/