关于跨浏览器的部分代码的封装
这段代码是从javascript高级程序设计(第三版)上面事件部分抽取出来的,共享一下,级当时自己做个笔记.以后应该能够用得找.
1 var EventUtil = { 2 addHandler: function (element, type, handler) {//注册事件 3 if (element.addEventListener) {//非IE 4 element.addEventListener(type, handler, false); 5 } 6 else if (element.attachEvent) {//IE 7 element.attachEvent("on" + type, handler); 8 } 9 else {//dom0级 10 element["on" + type] = handler; 11 } 12 }, 13 removeHandler: function (element, type, handler) {//取消注册事件 14 if (element.removeEventListener) {//非IE 15 element.removeEventListener(type, handler, false); 16 } 17 else if (element.detachEvent) {//IE 18 element.detachEvent("on" + type, handler); 19 } 20 else {//dom0级 21 element["on" + type] = null; 22 } 23 }, 24 getEvent: function (event) {//返回event的引用 25 return event ? event : window.event; 26 }, 27 getTarget: function (event) {//返回鼠标单击的目标对象 28 return event.target || event.srcElement; 29 }, 30 preventDefault: function (event) {//取消默认事件(a的href,radio,checkbox,) 31 if (event.preventDefault) { 32 event.preventDefault(); 33 } 34 else { 35 event.returnValue = false; 36 } 37 }, 38 stopPropagation: function (event) {//因为这个EventUtil只支持冒泡,不支持事件捕获,所以这个方法只能阻止冒泡 39 if (event.stopPrapagation) { 40 event.stopPropagation(); 41 } 42 else { 43 event.cancelBubble = true; 44 } 45 }, 46 getRelatedTarget: function (event) {//获取相关元素 47 /* 48 页面中有一个div;当鼠标离开这个div时,事件的主目标是div,而相关元素是body. 49 mouseover:事件的主目标是获得光标的元素,而相关元素就是那个失去光标的元素. 50 mouseout:事件的主目标是失去光标的元素,而相关元素使获得光标的那个元素. 51 */ 52 if (event.relatedTarget) { return event.relatedTarget; } 53 else if (event.toElement) { return event.toElement; } 54 else if (event.fromElement) { return event.fromElement; } 55 else { return null; } 56 }, 57 getButton: function (event) {//获取鼠标按钮的点击方式 58 if (document.implementation.hasFeature("MouseEvents", "2.0")) { return event.button; } 59 else { 60 switch (event.button) { 61 case 0: 62 case 1: 63 case 3: 64 case 5: 65 case 7: 66 return 0;//左击 67 case 2: 68 case 6: 69 return 2;//中间键 70 case 4: 71 return 1;//右击 72 } 73 } 74 } 75 };