javascript自定義事件的方式分為4個步驟；
一、谷歌、火狐自定義JavaScript事件
1、創建事件；
document.createEvent('HTMLEvents');
參數是字符串類型，表示要創建的事件類型。
- uievents；
- mutationevents；
- htmlevents；
2、初始化事件；
ev.initEvent('listen', false, false);
參數說明：
- eventType：事件名稱；
- canBubble：事件是否冒泡；
- cancelable：是否可以用 preventDefault() 方法取消事件；
3、監聽事件；
document.addEventListener(dataavailable, handler, param3);
參數說明：
- dataavailable：監聽的事件名稱；
- handler：處理函數；
- param3：是否是撲獲事件模型；
4、觸發事件；
document.dispatchEvent(ev);
參數說明：
ev:第一步所創建的事件對象；
<html> <head> <meta name="viewport" content="width=device-width" /> <title>javascript自定義事件</title> <script type="text/javascript"> //創建事件 var ev = document.createEvent('HTMLEvents'); window.onload = function () { //初始化事件 ev.initEvent('listen', false, false); //監聽事件與綁定處理函數 document.addEventListener("listen", function (e) { alert("事件被觸發!"); }, false); } </script> </head> <body> <div> <input type="button" value="觸發" onclick="document.dispatchEvent(ev);" /> </div> </body> </html>
2016-05-25補充：移除監聽removeEventListener及ev.stopPropagation()
<html> <head> <meta name="viewport" content="width=device-width" /> <title>javascript自定義事件</title> <script type="text/javascript"> //創建事件 var ev = document.createEvent('HTMLEvents'); function myFun1(e) { alert("事件被觸發11!"); } function myFun2(e) { alert("事件被觸發22!"); } window.onload = function () { //初始化事件 ev.initEvent('listen', false, false); //監聽事件與綁定處理函數 document.addEventListener("listen", myFun1, false); document.addEventListener("listen", myFun2, false); } </script> </head> <body> <div> <input type="button" value="觸發" onclick="document.dispatchEvent(ev);" /> <input type="button" value="移除" onclick='document.removeEventListener("listen", myFun1, false);' /> </div> </body> </html>
上面是移除myFun1的監聽，事件依然觸發，myFun2的監聽依然可以監聽到。而且，如果是用匿名函數添加的監聽，怎么移除呢？這是個問題。知道的請告訴我。
如果要移除全部的監聽，逐一移除監聽是可行方法之一。還有就是，讓事件不再派發，如上面的
<input type="button" value="停止派發" onclick='ev.stopPropagation()' />
這樣寫，單擊了停止派發按鈕后，事件就不再派發，全部監聽都不會再接收到此事件對象的派發。
Event的屬性非常多，比如時間戳，是否冒泡等，不同的屬性又可以實現不同的功能，有興趣的可以了解下Event對象的更多屬性。
二、IE自定義JavaScript事件
注意，以上方式只適用於谷歌，如果希望IE也能夠兼容，要並上兼容IE的方式。
其中谷歌與IE的對應關系為：
谷歌、火狐 IE
createEvent、initEvent createEventObject
addEventListener attachEvent
dispatchEvent fireEvent
IE自定義事件示例：
<html> <head> <meta name="viewport" content="width=device-width" /> <title>javascript自定義事件</title> <script type="text/javascript"> //創建事件 var ev = document.createEventObject(); window.onload = function () { document.attachEvent('ondataavailable',function () { alert("IE事件觸發!"); //IE } ); } </script> </head> <body> <div> <input type="button" value="觸發" onclick="document.fireEvent('ondataavailable', ev);" /> </div> </body> </html>
三、兼容谷歌火狐IE的自定義事件
要兼容谷歌火狐IE，那么按照上面的邏輯，那就是先判斷一下，如果是低版本IE，那么就使用低版本IE的函數或對象，否則就使用谷歌的事件對象。
<html> <head> <meta name="viewport" content="width=device-width" /> <title>javascript自定義事件</title> <script type="text/javascript"> //創建事件 var HtmlEvent; if (document.createEvent) { HtmlEvent = document.createEvent('HTMLEvents'); //谷歌、火狐創建新事件的寫法 HtmlEvent.initEvent("Click", false, false); } else if (document.createEventObject) { HtmlEvent = document.createEventObject(); //舊版本IE的創建新事件的寫法 } window.onload = function () { //監聽事件與綁定處理函數 if (document.addEventListener) { document.addEventListener('Click', function (e) { alert("谷歌火狐、事件被觸發!"); //谷歌火狐的觸發事件 }, false); } else if(document.attachEvent) { document.attachEvent('ondataavailable', function () { alert("IE事件觸發!"); }); //IE } } } function fire() { if (document.dispatchEvent) { document.dispatchEvent(HtmlEvent); } else if (document.fireEvent) { document.fireEvent('ondataavailable', HtmlEvent); } } </script> </head> <body> <div> <input type="button" value="觸發" onclick="fire()" /> </div> </body> </html>
四、觸發事件時向Listen傳參
傳參的方式很簡單，直接在參數賦值在事件Event對象上就OK了，什么格式的都可以。
<html> <head> <meta name="viewport" content="width=device-width" /> <title>javascript自定義事件</title> <script type="text/javascript"> //定義一個事件 var ev = document.createEvent('HTMLEvents'); window.onload = function () { //初始化事件 ev.initEvent('listen', false, false); //監聽事件與綁定處理函數 document.addEventListener("listen", function (e) { alert("傳過來的參數：" + e.name); }, false); } function fire() { ev.name = "劉備"; document.dispatchEvent(ev); } </script> </head> <body> <div> <input type="button" value="觸發" id="btn1" onclick="fire()" /> </div> </body> </html>
五、jQuery的自定義事件的綁定與觸發
jQuery綁定與觸發自定義事件更加方便，而且兼容性更好。
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).on("listen",function(event,a,b){ alert(a + " " + b); }); //第一個是自定義的事件名 //第二個參數是一個數組 //數組中的項會和自定義事件中回調的參數項對應 $(function(){ $('#btn1').click(function(){ $(document).trigger("listen",["aa","bb"]) }); }) </script> </head> <body> <input type="button" id="btn1" value="觸發" /> </body> </html>