1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>自定义事件并且主动触发</title>
6 </head>
7 <body>
8 <div id="div1">div</div>
9 <span id="span1">span</span>
10 </body>
11 <script>
12
13 var oDiv = document.getElementById('div1');
14 var oSpan = document.getElementById('span1');
15 bindEvent(oDiv , 'click',function(){
16 alert(3);
17 });
18 bindEvent(oSpan , 'gogo',function(){
19 alert(4);
20 });
21 fireEvent(oSpan , 'gogo'); //3 , 4
22 function bindEvent(obj,events,fn){
23 obj.listeners = obj.listeners || {};
24 obj.listeners[events] = obj.listeners[events] || [];
25 obj.listeners[events].push( fn );
26 if(obj.addEventListener){
27 obj.addEventListener(events,fn,false);
28 }
29 else{
30 obj.attachEvent('on'+events,fn);
31 }
32 }
33 //主动触发自定义事件
34 function fireEvent(obj,events){
35 for(var i=0;i<obj.listeners[events].length;i++){
36 obj.listeners[events][i]();
37 }
38 }
39 </script>
40 </html>
