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>