JavaScript事件对象与事件处理程序

一、事件对象

事件对象：在DOM触发事件时，会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息。既然event是事件对象，那么它必然存在属性

①DOM中的事件对象event属性
（1）、type属性用于获取事件类型
（2）、target、srcElement<兼容IE事件>属性用于获取事件目标
（3）、stopPropagation()方法用于阻止事件冒泡
（4）、preventDefault() 方法阻止事件的默认行为

二、DOM2级事件处理程序

　（1）、addEventListener() 用于处理指定事件处理程序操作
（2）、removeEventListener() 用于处理删除事件处理程序操作
三、IE事件处理程序

　（1）、attachEvent() 用于处理指定事件处理程序操作
（2）、detachEvent() 用于处理移除事件处理程序操作

接收相同的两个参数，事件处理程序的名称和事件处理程序的函数。

四、跨浏览器的事件处理程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM事件机制</title>
 6     <script type="text/javascript">
 7     window.onload=function(){
 8         var oButton=document.getElementById('button');
 9         var oBox=document.getElementById('Box');
10         var oA=document.getElementById('a');
11         var eventUtils={
12             // element  type事件类型 hander事件处理程序
13             addHandler:function(element,type,hander){
14                 if (element.addEventListener) {
15                     //DOM2级
16                     element.addEventListener(type,hander,false)
17                 }else if (element.attachEvent) {
18                     //IE事件绑定
19                     element.attachEvent('on'+type,hander)
20                 }else{
21                     //DOM0级
22                     element['on'+click]=hander;
23                     
24                 };
25             },
26             removeHandler:function(element,type,hander){
27                 if (element.removeEventListener) {
28                     //DOM2级
29                     element.removeEventListener(type,hander,false)
30                 }else if (element.deltachEvent) {
31                     //IE事件绑定
32                     element.deltachEvent('on'+type,hander)
33                 }else{
34                     //DOM0级
35                     element['on'+click]=null;
36                     
37                 };
38             }
39         };
40         eventUtils.addHandler(oButton,'click',showMessage);
41         eventUtils.addHandler(oBox,'click',function(){alert('oBox')});
42         eventUtils.addHandler(oA,'click',stopGo);
43     }
44     function showMessage(event){
45         console.info(event);        //事件对象
46         console.info(event.type);   //事件类型
47         console.info(event.target); //事件目标
48         event.stopPropagation();  //阻止事件冒泡
49     }
50     function stopGo(event){
51         console.info(event);        //事件对象
52         console.info(event.type);   //事件类型
53         console.info(event.target); //事件目标
54         event.preventDefault();//preventDefault() 方法 阻止事件的默认行为
55         alert('跳转');
56     }
57     </script>
58 </head>
59 <body>
60 <div id="Box">
61     <input type="button" name="" value="按钮" id="button" />
62     <a href="DomTest.html" id="a">跳转</a>
63 </div>
64 </body>
65 </html>

将上述跨浏览器事件处理程序代码抽成工具包

 1 //事件处理
 2 var eventUtils={
 3         // element  type事件类型 hander事件处理程序
 4         //添加事件处理
 5         addHandler:function(element,type,hander){
 6             if (element.addEventListener) {
 7                 //DOM2级--冒泡事件
 8                 element.addEventListener(type,hander,false)
 9             }else if (element.attachEvent) {
10                 //IE事件绑定
11                 element.attachEvent('on'+type,hander)
12             }else{
13                 //DOM0级
14                 element['on'+click]=hander;
15                 
16             };
17         },
18         //移除事件处理
19         removeHandler:function(element,type,hander){
20             if (element.removeEventListener) {
21                 //DOM2级
22                 element.removeEventListener(type,hander,false)
23             }else if (element.deltachEvent) {
24                 //IE事件绑定
25                 element.deltachEvent('on'+type,hander)
26             }else{
27                 //DOM0级
28                 element['on'+click]=null;
29                 
30             };
31         },
32         //获取事件对象
33         getEvent:function(event){
34             return event ? event : window.event;
35         },
36         //获取事件类型
37         getEventType:function(event){
38             return event.type
39         },
40         //获取事件目标
41         getEventTarget:function(event){
42             return event.target || event.srcElement;
43         },
44         //取消事件默认行为
45         getPreventDefalut:function(event){
46             event.preventDefault ? event.preventDefault() : event.returnValue==false;
47             /*if (event.preventDefault) {
48                 event.preventDefault();
49             } else{
50                 event.returnValue==false;
51             };*/
52         },
53         //阻止事件冒泡
54         stopPropagation:function(event){ 
55             event.stopPropagation ? event.stopPropagation() : event.cancelBubble();
56             /*if (event.stopPropagation) {
57                 event.stopPropagation(); 
58             }else if (event.cancelBubble) {
59                 event.cancelBubble(); //阻止IE事件冒泡
60             };*/
61         },
62         //获取选择器对象
63         getSelector:function(id){
64             return document.getElementById(id);
65         }
66 }