首页 > 代码库 > DOM事件探秘
DOM事件探秘
说到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 = http://www.mamicode.com/false;40 }41 },42 //阻止事件冒泡43 stopPropagation: function(event) {44 if (event.stopPropagation) {45 event.stopPropagation();46 } else {47 event.cancelBubble = true;48 }49 }50 }
DOM事件探秘