js事件觸發器fireEvent和dispatchEvent

轉自：https://www.cnblogs.com/tiger95/p/6962059.html

事件觸發器就是用來觸發某個元素下的某個事件，IE下fireEvent方法，高級瀏覽器（chrome,firefox等）有dispatchEvent方法。

一般我們在元素上綁定事件后，是靠用戶在這些元素上的鼠標行為來捕獲或者觸發事件的，或者自帶的瀏覽器行為事件，比如click，mouseover，load等等，有些時候我們需要自定義事件或者在特定的情況下需要觸發這些事件。這個時候我們可以使用IE下fireEvent方法，高級瀏覽器（chrome,firefox等）有dispatchEvent方法。

例如在ie下看看這個例子：

01	//document上綁定自定義事件ondataavailable

02	document.attachEvent('ondataavailable', function (event) {

03	alert(event.eventType);

04

});

05	var obj=document.getElementById("obj");

06	//obj元素上綁定click事件

07	obj.attachEvent('onclick', function (event) {

08	alert(event.eventType);

09

});

10	//調用document對象的createEventObject方法得到一個event的對象實例。

11	var event = document.createEventObject();

12	event.eventType = 'message';

13	//觸發document上綁定的自定義事件ondataavailable

14	document.fireEvent('ondataavailable', event);

15	//觸發obj元素上綁定click事件

16	document.getElementById("test").onclick = function () {

17	obj.fireEvent('onclick', event);

18

};

fireEvent的官方文檔：http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx

createEventObject的官方文檔：http://msdn.microsoft.com/en-us/library/ie/ms536390(v=vs.85).aspx

再看看高級瀏覽器（chrome,firefox等）的例子：

01	//document上綁定自定義事件ondataavailable

02	document.addEventListener('ondataavailable', function (event) {

03	alert(event.eventType);

04	}, false);

05	var obj = document.getElementById("obj");

06	//obj元素上綁定click事件

07	obj.addEventListener('click', function (event) {

08	alert(event.eventType);

09	}, false);

10	//調用document對象的 createEvent 方法得到一個event的對象實例。

11	var event = document.createEvent('HTMLEvents');

12	// initEvent接受3個參數：

13	// 事件類型，是否冒泡，是否阻止瀏覽器的默認行為

14	event.initEvent("ondataavailable", true, true);

15	event.eventType = 'message';

16	//觸發document上綁定的自定義事件ondataavailable

17	document.dispatchEvent(event);

18

19	var event1 = document.createEvent('HTMLEvents');

20	event1.initEvent("click", true, true);

21	event1.eventType = 'message';

22	//觸發obj元素上綁定click事件

23	document.getElementById("test").onclick = function () {

24	obj.dispatchEvent(event1);

25

};

在實際封裝中沒這么簡單，看了一下jQuery.event.trigger的源碼（http://www.css88.com/tool/jQuerySourceViewer/#v=1.7.2&fn=jQuery.event.trigger），是通過模擬來實現了，給某元素綁定一個事件處理函數，如果有觸發事件的實際操作就會執行相應的事件處理函數，所以要達到事件觸發器的功能只要獲取到相應的事件處理函數然后執行。