跨浏览器的事件处理程序 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>事件流</title>
 5     <meta charset="utf-8"/>
 6 </head>
 7 <body>
 8     <div id="box">
 9         <input type="button" value="按钮" id="btn" onclick="showmes()" />
10         <input type="button" value="按钮2" id="btn2" />
11         <input type="button" value="按钮3" id="btn3" />
12     </div>
13     <script>
14         function showmes(){  //html事件处理
15             alert('Hello world');
16         }
17 
18         var btn2 = document.getElementById('btn2');  //dom0级事件处理
19         btn2.onclick = function(){
20             alert('DOM0级事件处理');
21         }
22         //btn2.onclick = null;
23 
24         var btn3 = document.getElementById('btn3');  //dom2级事件处理
25          //dom2级可调用多个时间处理程序
26         // btn3.addEventListener('click',showmes,false); 
27         // btn3.addEventListener('click',function(){
28         //     alert(this.value);
29         // },false);
30         //btn3.removeEventListener('click',showmes,false);
31 
32         //btn3.attachEvent('onclick',showmes);  //IE浏览器时间处理程序
33         //btn3.detachEvent('onclick',showmes);
34         
35         var eventUtil = {
36             addHandler : function(element,type,handler){   //DOM2级事件判断
37                 if(element.addEventListener){
38                     element.addEventListener(type,handler,false);
39                 }else if(element.attachEvent){    //IE事件判断
40                     element.attachEvent('on'+type,handler);
41                 }else{
42                     element['on'+type] = handler;
43                 }
44             },
45             deleteHandler : function(element,type,handler){
46                 if(element.removeEventListener){
47                     element.removeEventListener(type,handler,false);
48                 }else if(element.attachEvent){
49                     element.detachEvent('on'+type,handler);
50                 }else{
51                     element['on'+type] = null;
52                 }
53             }
54         }
55         eventUtil.addHandler(btn3,'click',showmes);
56     </script>
57 </body>
58 </html>

 

posted @ 2015-10-19 11:35  静如秋叶  阅读(224)  评论(0)    收藏  举报