说到DOM事件，就不得不说以下几点：
1 事件流
事件流：描述的是从页面中接受事件的顺序
事件流分为事件冒泡流和事件捕获流。那么什么是事件冒泡，什么是事件捕获呢？
事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。
事件捕获：不太具体的元素最早接收事件，而不太具体的元素最后接收事件。它跟事件冒泡是一个截然相反的概念。
2 事件处理程序
2.1 HTML事件处理程序
如下将事件处理程序嵌入到HTML元素当中
<div> <input type="button" value="按钮" id="btn1" onclick="showMes()"/> </div>
<script type="text/javascript">
function showMes(){
alert('Hello World!');
}
</script>
2.2 DOM 0级事件处理程序 (用得比较多的)
下面的DOM 0级添加和删除事件事件处理程序的表现形式：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>DOM事件探秘</title> 7 </head> 8 9 <body> 10 <input type="text" value="按钮2" id="btn2" /> 11 <script type="text/javascript"> 12 var oBtn2 = document.getElementById("btn2"); 13 //DOM 0级添加事件处理程序 14 oBtn2.onclick = function(){ 15 alert("这是通过DOM 0级添加的事件处理程序"); 16 } 17 //DOM 0级删除事件处理程序 18 oBtn2.onclick = null; 19 </script> 20 </body> 21 </html>
2.3 DOM 2级事件处理程序
DOM 2级事件处理程序定义了两个方法：用于指定和删除事件处理程序的操作：
addEventListener()和removeEventListener(),它们接收三个参数： 要处理的事件名，作为事件处理程序的函数和布尔值(false代表事件冒泡)
下面的DOM 2级添加和删除事件事件处理程序的表现形式：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM事件探秘</title> 6 </head> 7 <body> 8 <input type="button" value="按钮3" id="btn3" /> 9 <script type="text/javascript"> 10 function showMes(){ 11 alert('这是通过DOM 2添加的事件处理程序'); 12 } 13 var btn3 = document.getElementById('btn3'); 14 // DOM 2级添加事件处理程序 15 btn3.addEventListener('click',showMes,false); 16 // DOM 2级删除事件处理程序 17 btn3.removeEventListener('click',showMes,false); 18 </script> 19 </body> 20 </html>
2.4 IE事件处理程序 (支持IE事件处理程序的浏览器是IE和Opera)
IE事件处理程序提供了两个类似DOM的方法:attachEvent()和detachEvent(),它们接收相同的两个参数：要处理的事件名，作为事件处理程序的函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM事件探秘</title> 6 </head> 7 <body> 8 <input type="button" value="按钮3" id="btn3" /> 9 <script type="text/javascript"> 10 function showMes() { 11 alert('IE事件处理程序'); 12 } 13 var btn3 = document.getElementById('btn3'); 14 // DOM 2级添加事件处理程序 15 btn3.attachEvent('click', showMes); 16 // DOM 2级删除事件处理程序 17 btn3.detachEvent('click', showMes); 18 </script> 19 </body> 20 </html>
2.5 跨浏览器的事件处理程序，将其封装在一个对象里，暂时就给它封装两个方法，添加事件和删除事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>DOM事件探秘</title> 6 </head> 7 <body> 8 <input type="button" value="按钮3" id="btn3" /> 9 <script> 10 var eventUtil = { 11 // 添加句柄 12 addHandler:function(ele,type,handler){ 13 if(ele.addEventListener){ 14 ele.addEventListener(type,handler,false); 15 } else if(ele.attachEvent){ 16 ele.attachEvent('on'+type,handler); 17 } else { 18 ele['on'+type] = handler; 19 } 20 }, 21 removeHandler:function(ele,type,handler){ 22 if(ele.removeEventListener){ 23 ele.removeEventListener(type,handler,false); 24 } else if(ele.detachEvent){ 25 ele.detachEvent(type,handler); 26 } else { 27 ele['on'+type] = handler; 28 } 29 } 30 } 31 </script> 32 </body>
3 事件对象
什么是事件对象？在触发DOM上的事件时都会产生一个对象event,在IE8以前是window.event
3.1 DOM中的事件对象(以下是比较常见的属性和方法)
(1) type属性 用于获取事件类型
(2) target属性 用于获取事件目标
(3) stopPropagation()方法 用于阻止事件冒泡
(4) preventDefault()方法 阻止事件的默认行为
3.2 IE中的事件对象
(1) type属性 用于获取事件类型
(2) srcElement属性 用于获取事件目标
(3) cancelBubble属性 用于阻止事件冒泡，设置为true表示阻止冒泡，设置为false表示不阻止冒泡
(4) returnValue属性 用于阻止事件的默认行为，设置为false表示阻止事件的默认行为，设置为true表示不阻止事件的默认行为
4 封装event.js,解决浏览器兼容问题
1 var eventUtil = { 2 // 添加句柄 3 addHandler: function(ele, type, handler) { 4 if (ele.addEventListener) { 5 ele.addEventListener(type, handler, false); 6 } else if (ele.attachEvent) { 7 ele.attachEvent('on' + type, handler); 8 } else { 9 ele['on' + type] = handler; 10 } 11 }, 12 //删除句柄 13 removeHandler: function(ele, type, handler) { 14 if (ele.removeEventListener) { 15 ele.removeEventListener(type, handler, false); 16 } else if (ele.detachEvent) { 17 ele.detachEvent(type, handler); 18 } else { 19 ele['on' + type] = handler; 20 } 21 }, 22 //获取事件 23 getEvent: function(event) { 24 return event ? event : window.event; 25 }， 26 //获取事件类型 27 getType: function(event) { 28 return event.type; 29 }, 30 //获取事件的目标 31 getElement: function(event) { 32 return event.target || event.srcElement; 33 }, 34 //阻止事件的默认行为 35 preventDefault: function(event) { 36 if (event.preventDefault) { 37 event.preventDefault(); 38 } else { 39 event.returnValue = false; 40 } 41 }, 42 //阻止事件冒泡 43 stopPropagation: function(event) { 44 if (event.stopPropagation) { 45 event.stopPropagation(); 46 } else { 47 event.cancelBubble = true; 48 } 49 } 50 }