一夜只、element.dispatchEvent()
對于標準瀏覽器，其提供了可供元素觸發(fā)自定義事件的方法：element.dispatchEvent().遭笋。
不過咬腕，在使用該方法之前趴酣，我們還需要做其他兩件事梨树，即創(chuàng)建和初始化。
document.createEvent()event.initEvent()element.dispatchEvent()舉個例子：vardom=document.querySelector('#id')document.addEventListener('alert',function(event){console.log(event)},false);// 創(chuàng)建varevt=document.createEvent("HTMLEvents");// 初始化evt.initEvent("alert",false,false);// 觸發(fā), 即彈出文字dom.dispatchEvent(evt);
1价卤、createEvent()
createEvent()方法返回新創(chuàng)建的Event對象，支持一個參數(shù)渊涝，表示事件類型慎璧，具體見下表：
參數(shù)事件接口初始化方法
HTMLEventsHTMLEventinitEvent()
MouseEventsMouseEventinitMouseEvent()
UIEventsUIEventinitUIEvent()
2床嫌、initEvent()
initEvent()方法用于初始化通過DocumentEvent接口創(chuàng)建的Event的值。
支持三個參數(shù)：initEvent(eventName, canBubble, preventDefault)
分別表示：
事件名稱
是否可以冒泡
是否阻止事件的默認操作
3胸私、dispatchEvent()
dispatchEvent()就是觸發(fā)執(zhí)行了厌处，dom.dispatchEvent(eventObject)
參數(shù)eventObject表示事件對象，是createEvent()方法返回的創(chuàng)建的Event對象岁疼。
二阔涉、自定義事件
1、Event
自定義事件的函數(shù)有Event捷绒、CustomEvent和dispatchEvent
// 向 window派發(fā)一個resize內(nèi)置事件window.dispatchEvent(newEvent('resize'))// 直接自定義事件瑰排，使用 Event 構造函數(shù)：varevent=newEvent('build');varelem=document.querySelector('#id')// 監(jiān)聽事件elem.addEventListener('build',function(e){...},false);// 觸發(fā)事件.elem.dispatchEvent(event);
2、CustomEvent
CustomEvent可以創(chuàng)建一個更高度自定義事件暖侨，還可以附帶一些數(shù)據(jù)椭住，具體用法如下：
varmyEvent=newCustomEvent(eventname,options);其中 options 可以是：{detail:{...},bubbles:true,//是否冒泡cancelable:false//是否取消默認事件}
其中 detail 可以存放一些初始化的信息，可以在觸發(fā)的時候調(diào)用字逗。其他屬性就是定義該事件是否具有冒泡等等功能京郑。
內(nèi)置的事件會由瀏覽器根據(jù)某些操作進行觸發(fā)，自定義的事件就需要人工觸發(fā)葫掉。
dispatchEvent 函數(shù)就是用來觸發(fā)某個事件：
element.dispatchEvent(customEvent);
上面代碼表示些举，在element上面觸發(fā)customEvent這個事件。
結合起來用就是：
// add an appropriate event listenerobj.addEventListener("cat",function(e){process(e.detail)});// create and dispatch the eventvarevent=newCustomEvent("cat",{"detail":{"hazcheeseburger":true}});obj.dispatchEvent(event);使用自定義事件需要注意兼容性問題俭厚，而使用 jQuery 就簡單多了：// 綁定自定義事件$(element).on('myCustomEvent',function(){});// 觸發(fā)事件$(element).trigger('myCustomEvent');// 此外户魏，你還可以在觸發(fā)自定義事件時傳遞更多參數(shù)信息：$("p").on("myCustomEvent",function(event,myName){$(this).text(myName+", hi there!");});$("button").click(function(){$("p").trigger("myCustomEvent",["John"]);});
3、IE瀏覽器
由于向下很多版本的瀏覽器都不支持document.createEvent()方法套腹，因此我們需要另辟蹊徑（據(jù)說IE有document.createEventObject()和event.fireEvent()方法绪抛，但是不支持自定義事件~~）。
IE瀏覽器有不少自給自足的東西电禀，例如下面要說的這個"propertychange"事件幢码，顧名思意，就是屬性改變即觸發(fā)的事件尖飞。
例如文本框value值改變症副，或是元素id改變，或是綁定的事件改變等等政基。
dom.evtAlert="2012-04-01";<br>dom.attachEvent("onpropertychange",function(e){if(e.propertyName=="evtAlert"){fn.call(this);}});
這個贞铣，當我們需要觸發(fā)自定義事件的時候，只要修改DOM上自定義的evtAlert屬性的值即可：
dom.evtAlert=Math.random().toString(36).substr(2)
此時就會觸發(fā)dom上綁定的onpropertychange事件沮明，又因為修改的屬性名正好是"evtAlert", 于是自定義的fn就會被執(zhí)行辕坝。這就是IE瀏覽器下事件觸發(fā)實現(xiàn)的完整機制，應該說講得還是蠻細的荐健。
三酱畅、自定義事件的刪除
與觸發(fā)事件不同琳袄，事件刪除，各個瀏覽器都提供了對應的事件刪除方法纺酸，如removeEventListener和detachEvent窖逗。
不過呢，對于IE瀏覽器餐蔬，還要多刪除一個事件碎紊，就是為了實現(xiàn)觸發(fā)功能額外增加的onpropertychange事件：
dom.detachEvent("onpropertychange",evt);varfireEvent=function(element,event){if(document.createEventObject){// IE瀏覽器支持fireEvent方法 varevt=document.createEventObject();returnelement.fireEvent('on'+event,evt)}else{// 其他標準瀏覽器使用dispatchEvent方法 varevt=document.createEvent('HTMLEvents');evt.initEvent(event,true,true);return!element.dispatchEvent(evt);}};
參考：http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/
作者：R_X
鏈接：http://www.reibang.com/p/5f9027722204
來源：簡書
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權樊诺，非商業(yè)轉載請注明出處仗考。
