不要被標題蒙蔽了，今天的重點不是論述事件觸發器，而是說一下dispatchEvent這個東西。好了，先簡單做個鋪墊，dispatchEvent是作為高級瀏覽器(如chrome、Firfox等)的事件觸發器來使用的，那么什么是事件觸發器？就是觸發事件的東西。可能有人覺得有點莫名其妙，觸發事件不是在交互中被觸發的嗎？的確，通常情況下，事件的觸發都是由用戶的行為如點擊、刷新等操作實現，但是，其實有的情況下，事件的觸發必須又程序來實現，比如ajax框架的一些自定義事件。正如事件的綁定一樣，對於瀏覽器而言，綁定事件分為高級瀏覽器和IE瀏覽器兩派，事件觸發器也是分為高級瀏覽器和IE兩派，而dispatchEvent正是用於高級瀏覽器的事件觸發。下面看我整理的一個觸發事件的例子：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //document上綁定自定義事件oneating document.addEventListener('oneating', function (event) { alert(event.mingzi+'，'+event.message); }, false); //創建event的對象實例。 var event = document.createEvent('HTMLEvents'); // 3個參數：事件類型，是否冒泡，是否阻止瀏覽器的默認行為 event.initEvent("oneating", true, true); /*屬性，隨便自己定義*/ event.mingzi = 'hello,我是李小賤'; event.message = '我今天24歲'; //觸發自定義事件oneating document.dispatchEvent(event); </script> </html>
dispatchEvent大概就是這三步，上面的例子結果是：在頁面載入的時候，會彈出提示框，也就是觸發了oneating這個自定義事件。下面看看據說來自司徒正美的一段代碼：
var fireEvent = function(element,event){ if (document.createEventObject){ // IE瀏覽器支持fireEvent方法 var evt = document.createEventObject(); return element.fireEvent('on'+event,evt) } else{ // 其他標准瀏覽器使用dispatchEvent方法 var evt = document.createEvent( 'HTMLEvents' ); evt.initEvent(event, true, true); return !element.dispatchEvent(evt); } };
document.creatEventObject()是IE創建event對象實例的方法，和document.creatEvent('HTMLEvents')在非IE主流瀏覽器下的作用相同，fireEvent是IE下的事件觸發器，與dispatchEvent在非IE主流瀏覽器下作用相同。