标签：
在学习之前建议请看一下事件流、事件冒泡、事件捕获
一、事件对象
事件对象：在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 }
标签：
原文地址：http://www.cnblogs.com/zjf-1992/p/5389200.html
