1 <html> 2 <title>事件</title> 3 <meta charset="utf-8"/> 4 <body> 5 <div id="box"> 6 <input type="button" value="按钮" id="btn" onclick="showMes()"/> 7 <input type="button" value="按钮2" id="btn2"/> 8 <input type="button" value="按钮3" id="btn3"/> 9 <a href="event.html" id="go" target="_blank">跳转</a> 10 </div> 11 </body> 12 </html> 13 <script> 14 /** 15 * 非IE 16 * event.type 获取事件的类型 17 * event.target属性 获取事件的目标 18 * event.stopPropagation()方法;//阻止事件冒泡 19 * event.preventDefault()方法;//阻止事件默认行为 20 * 21 * IE 22 * event.type 获取事件的类型 23 * event.srcElement 24 * event.cancelBubble属性阻止事件冒泡 25 * 设置为true为阻止冒泡，设置为false不阻止冒泡 26 * returnValue=false 阻止事件默认行为 27 * 28 */ 29 function showMes(event){ 30 event = event || window.event; 31 var ele = event.target || event.srcElement; 32 alert(ele.nodeName); 33 } 34 35 function showbox(){ 36 alert('这里放盒子'); 37 } 38 39 function stopGoto(event){ 40 //event.type 获取事件的类型 41 //event.target属性 获取事件的目标 42 event.stopPropagation();//阻止事件冒泡 43 event.preventDefault();//阻止事件默认行为 44 } 45 46 var btn2 = document.getElementById("btn2"); 47 var btn3 = document.getElementById("btn3"); 48 var go = document.getElementById("go"); 49 btn2.onclick = function(){ 50 alert('通过DOM0级添加事件'); 51 } 52 btn2.onclick = null; 53 54 //DOM2级事件 55 var eventUtil = { 56 57 //添加句柄 58 addHandler:function(element,type,handler){ 59 if(element.addEventListener){ 60 element.addEventListener(type,handler,false); 61 }else if(element.attachEvent){ 62 element.attachEvent('on'+type,handler); 63 }else{ 64 element['on'+type] = handler; 65 } 66 }, 67 //删除句柄 68 removeHandler:function(element,type,handler){ 69 if(element.removeEventListener){ 70 element.removeEventListener(type,handler,false); 71 }else if(element.detachEvent){ 72 element.detachEvent('on'+type,handler); 73 }else{ 74 element['on'+type] = null; 75 } 76 }, 77 78 getEvent:function(event){ 79 return event ? event : window.event; 80 }, 81 82 getElement:function(event){ 83 return event.target || event.srcElement; 84 }, 85 86 preventDefault:function(event){ 87 if(event.preventDefault){ 88 event.preventDefault(); 89 }else{ 90 event.returnValue = false; 91 } 92 }, 93 94 stopPropagation:function(event){ 95 if(event.stopPropagation){ 96 event.stopPropagation(); 97 }else{ 98 event.cancelBubble = true; 99 } 100 } 101 }; 102 103 eventUtil.addHandler(btn3,"click",showMes); 104 //eventUtil.removeHandler(btn3,"click",showMes); 105 eventUtil.addHandler(box,"click",showbox); 106 eventUtil.addHandler(go,"click",stopGoto); 107 </script>