跨浏览器的事件对象详解
封装事件对象
1 var event_util = { 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 //获取事件对象 23 getEvent: function(event) { 24 return event ? event : window.event; 25 }, 26 //获取事件目标 27 getTarget: function(event) { 28 return event.target || event.srcElement; 29 }, 30 //阻止事件冒泡 31 stopPropagation: function(event) { 32 if(event.stopPropagation) { 33 event.stopPropagation(); 34 } else { 35 event.cancelBubble = true; 36 } 37 }, 38 //取消事件默认行为 39 preventDefault: function(event) { 40 if(event.preventDefault) { 41 event.preventDefault(); 42 } else { 43 event.returnValue = false; 44 } 45 } 46 };
将event_util对象另存到一个“事件对象.js”文件中，以方便调用。
html代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>事件对象示例</title> 6 </head> 7 <body> 8 <div id="box"> 9 <input type="button" id="btn" value="button"> 10 <a href="http://www.baidu.com" id="link">百度</a> 11 </div> 12 <script src="事件对象.js"></script> 13 </body> 14 </html>
检测事件类型
1 var btn = document.getElementById("btn"); 2 event_util.addHandler(btn, "click", function(event) { 3 event = event_util.getEvent(event); 4 alert(event.type); //"click" 5 });
检测事件目标
1 var btn = document.getElementById("btn"); 2 event_util.addHandler(btn, "click", function(event) { 3 alert(event_util.getTarget(event)); //object HTMLInputElement 4 });
阻止事件冒泡
1 var btn = document.getElementById("btn"); 2 var div = document.getElementById("box"); 3 event_util.addHandler(btn, "click", function(event) { 4 alert("You‘ve clicked the button."); 5 event = event_util.getEvent(event); 6 event_util.stopPropagation(event); 7 }); 8 event_util.addHandler(div, "click", function() { 9 alert("You‘ve clicked the div."); 10 });
取消事件默认行为
1 var link = document.getElementById("link"); 2 event_util.addHandler(link, "click", function(event) { 3 alert("这个链接不会跳转！"); 4 event = event_util.getEvent(event); 5 event_util.preventDefault(event); 6 });
注意：在涉及到event对象的操作时，记得传入event参数；一旦传入event参数，记得调用event_util.getEvent()。
原文：http://www.cnblogs.com/cc156676/p/5738509.html
