首页 > 代码库 > javascript DOM事件总结
javascript DOM事件总结
1 <html> 2 <title>事件</title> 3 <meta charset="utf-8"/> 4 <body> 5 <div id="box"> 6 <input type="button" value="http://www.mamicode.com/按钮" id="btn" onclick="showMes()"/> 7 <input type="button" value="http://www.mamicode.com/按钮2" id="btn2"/> 8 <input type="button" value="http://www.mamicode.com/按钮3" id="btn3"/> 9 <a href="http://www.mamicode.com/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=http://www.mamicode.com/false 阻止事件默认行为"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 = http://www.mamicode.com/false;"click",showMes); 104 //eventUtil.removeHandler(btn3,"click",showMes); 105 eventUtil.addHandler(box,"click",showbox); 106 eventUtil.addHandler(go,"click",stopGoto); 107 </script>
javascript DOM事件总结
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。