DOM事件总结
最近回顾了一下慕课网的Javascript课程《DOM事件探秘》，老师讲的非常好，感觉有必要总结一下，于是将课堂笔记和老师的案例Copy过来了。
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流
1、事件冒泡
事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
二、事件处理程序
1、HTML事件处理程序
1 <input type="button" value="按钮" id="btn" onclick="showMes()"> 2 <script> 3 function showMes(){ 4 alert('hello world!'); 5 } 6 </script>
2、DOM0级事件处理程序
1 <input type="button" value="按钮2" id="btn2"> 2 btn2.onclick=function(){ 3 alert('这是通过DOM0级添加的事件！'); 4 } 5 btn2.onclick=null;
3、DOM2级事件处理程序
DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。
它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值(一般是false,false表示事件冒泡处理，true表示事件捕获处理)。
IE浏览器不支持
1 <input type="button" value="按钮3" id="btn3"> 2 3 <script> 4 var btn3=document.getElementById('btn3'); 5 btn3.addEventListener('click', showMes,false); 6 //可以添加多个DOM2级事件 7 btn3.addEventListener('click', function(){ 8 alert(this.value); 9 },false); 10 //移除DOM2级事件 11 btn3.removeEventListener('click', showMes,false); 12 </script>
4、IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数
5、跨浏览器的事件处理程序
三、事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target：事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement：事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为
四、兼容性的事件处理对象文件（event.js）
1 var eventUtil={ 2 // 添加句柄 3 addHandler:function(element,type,handler){ 4 if(element.addEventListener){ 5 element.addEventListener(type,handler,false); 6 }else if(element.attachEvent){ 7 element.attachEvent('on'+type,handler); 8 }else{ 9 element['on'+type]=handler; 10 } 11 }, 12 // 删除句柄 13 removeHandler:function(element,type,handler){ 14 if(element.removeEventListener){ 15 element.removeEventListener(type,handler,false); 16 }else if(element.detachEvent){ 17 element.detachEvent('on'+type,handler); 18 }else{ 19 element['on'+type]=null; 20 } 21 }, 22 getEvent:function(event){ 23 return event?event:window.event; 24 }, 25 getType:function(event){ 26 return event.type; 27 }, 28 getElement:function(event){ 29 return event.target || event.srcElement; 30 }, 31 preventDefault:function(event){ 32 if(event.preventDefault){ 33 event.preventDefault(); 34 }else{ 35 event.returnValue=false; 36 } 37 }, 38 stopPropagation:function(event){ 39 if(event.stopPropagation){ 40 event.stopPropagation(); 41 }else{ 42 event.cancelBubble=true; 43 } 44 } 45 }
五、测试案例
index.html
1 <html> 2 <head> 3 <title>事件流</title> 4 <meta charset="utf-8"> 5 <script src="js/event.js"></script> 6 <script src="js/script.js"></script> 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 <a href="event.html" id="go">跳转</a> 13 </div> 14 </body> 15 </head>
script.js
1 window.onload=function(){ 2 var go=document.getElementById('go'), 3 box=document.getElementById('box'); 4 5 eventUtil.addHandler(box,'click',function(){ 6 alert('我是整个父盒子'); 7 }); 8 9 eventUtil.addHandler(go,'click',function(e){ 10 //e=eventUtil.getEvent(e); 11 e=e || window.event; 12 alert(eventUtil.getElement(e).nodeName); 13 eventUtil.preventDefault(e); 14 eventUtil.stopPropagation(e); 15 }); 16 17 }
event.html
1 <html> 2 <head> 3 <title>事件流</title> 4 <meta charset="utf-8"> 5 <body> 6 事件 7 </body> 8 </head>
以上案例做了兼容性处理，在主流浏览器中均可使用event.js处理事件。
