javascript自定义事件的方式分为4个步骤；
1、创建事件；
document.createEvent(‘HTMLEvents‘);
参数是字符串类型，表示要创建的事件类型。
2、初始化事件；
ev.initEvent(‘listen‘, false, false);
参数说明：
3、监听事件；
document.addEventListener(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>
注意，以上方式只适用于谷歌，如果希望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的函数或对象，否则就使用谷歌的事件对象。
<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>
传参的方式很简单，直接在参数赋值在事件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>
原文：http://www.cnblogs.com/kissdodog/p/4892239.html