由于工作和个人学习,很久没有更新自己的博客了,今天被朋友提醒了下就来发一篇随便,请大家多多指点!!!
所有的方法都是封装过得,大家可以直接添加到自己的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 //跨浏览器事件对象---返回event对象的引用 13 getEvent:function(event){ 14 return event ? event : window.event; 15 }, 16 //跨浏览器事件对象---返回事件的目标 17 getTarget:function(event){ 18 return event.target || event.srcElement; 19 }, 20 //跨浏览器事件对象---取消默认事件 21 preventDefault:function(event){ 22 if(event.preventDefault){ 23 event.preventDefault(); 24 }else{ 25 event.returnValue = false; 26 } 27 }, 28 //跨浏览器处理程序---移除方法 29 removeHandler:function(element,type,handler){ 30 if(element.removeEventListener){ 31 element.removeEventListener(type,handler,false); 32 }else if(element.detachEvent){ 33 element.detachEvent("on" + type,handler); 34 }else{ 35 element["on" + type] = null; 36 } 37 }, 38 //跨浏览器事件对象---阻止事件流 39 stopPropagation:function(event){ 40 if(event.stopPropagation){ 41 event.stopPropagation(); 42 }else{ 43 event.cancelBubble = true; 44 } 45 }, 46 //跨浏览器寻找下一个兄弟并剔除空的文本节点 47 nextnode:function(node){ 48 if(!node)return ; 49 if(node.nodeType == 1) 50 return node; 51 if(node.nextSibling) 52 return this.nextnode(node.nextSibling); 53 }, 54 //跨浏览器寻找上一个兄弟并剔除空的文本节点 55 prevnode:function(node){ 56 if(!node)return ; 57 if(node.nodeType == 1) 58 return node; 59 if(node.previousSibling) 60 return prevnode(node.previousSibling); 61 }, 62 //根据class获取元素节点,方法一 63 getElementsByClass:function(node,searchClass,tag) { 64 var classElements = new Array(); 65 var els = node.getElementsByTagName(tag); // use "*" for all elements 66 var elsLen = els.length; 67 var pattern = new RegExp("\\b"+searchClass+"\\b"); 68 for (i = 0, j = 0; i < elsLen; i++) 69 { 70 if ( pattern.test(els[i].className) ) 71 { 72 classElements[j] = els[i]; 73 j++; 74 } 75 } 76 return classElements; 77 }, 78 //根据class获取元素节点,方法二 79 getElementsByClassName:function(fatherId,tagName,className){ 80 node = fatherId&&document.getElementById(fatherId) || document; 81 tagName = tagName || "*"; 82 className = className.split(" "); 83 var classNameLength = className.length; 84 for(var i=0,j=classNameLength;i<j;i++){ 85 className[i]= new RegExp("(^|\\s)" + className[i].replace(/\-/g, "\\-") + "(\\s|$)"); //创建匹配类名的正则 86 } 87 var elements = node.getElementsByTagName(tagName); 88 var result = []; 89 for(var i=0,j=elements.length,k=0;i<j;i++){//缓存length属性 90 var element = elements[i]; 91 while(className[k++].test(element.className)){//优化循环 92 if(k === classNameLength){ 93 result[result.length] = element; 94 break; 95 } 96 } 97 k = 0; 98 } 99 return result; 100 }, 101 //根据class获取元素节点,方法三 102 getByClass:function(className,parents){ 103 parents=parents||document; 104 if(parents.getElementsByClassName){ 105 return parents.getElementsByClassName(className); 106 } 107 var nodes=parents.getElementsByTagName("*"); 108 ret=[]; 109 for (var i=0;i<nodes.length;i++){ 110 if(this.hasClass(nodes[i],className)){ 111 ret.push(nodes[i]); 112 } 113 } 114 return ret; 115 }, 116 hasClass:function(node,className){ 117 var names=node.className.split(/\s+/); 118 for(var i=0;i<names.length;i++){ 119 if(names[i]==className){ 120 return true; 121 } 122 } 123 return false; 124 }, 125 //获取元素样式表中样式 126 getStyle:function(elem,name){ 127 if(elem.style[name]) 128 return elem.style[name]; 129 else if(elem.currentStyle) 130 return elem.currentStyle[name]; 131 else if(document.defaultView&&document.defaultView.getComputedStyle){ 132 name = name.replace(/([A-Z])/g,"-$1"); 133 name = name.toLowerCase(); 134 var s = document.defaultView.getComputedStyle(elem,""); 135 return s&&s.getPropertyValue(name); 136 } 137 else{ 138 return null; 139 } 140 }, 141 //跨浏览器获取相关元素 142 getRelatedTarget:function(event){ 143 if(event.relatedTarget){ 144 return event.relatedTarget; 145 }else if(event.toElement){ 146 return event.toElement; 147 }else if(event.fromElement){ 148 return event.fromElement; 149 }else{ 150 return null; 151 } 152 }, 153 //鼠标事件的button属性检测 154 getButton:function(event){ 155 if(document.implementation.hasFeature("MouseEvents","2.0")){ 156 return event.button; 157 }else{ 158 switch(event.button){ 159 case 0: 160 case 1: 161 case 3: 162 case 5: 163 case 7: 164 return 0; 165 case 2: 166 case 6: 167 return 2; 168 case 4: 169 return 1; 170 } 171 } 172 }, 173 //跨浏览器字符编码---charCode属性检测 174 getCharCode:function(event){ 175 if(typeof event.charCode == "number"){ 176 return event.charCode; 177 }else{ 178 return event.keyCode; 179 } 180 }, 181 //跨浏览器鼠标滚轮滚动显示detail属性值 182 getWheelDelta:function(event){ 183 if(event.wheelDelta){ 184 return event.wheelDelta; 185 }else{ 186 return -event.detail * 40; 187 } 188 }, 189 //跨浏览器兼容鼠标滚轮滚动事件 190 getWheel:function(document,scrollFunc){ 191 if(document.attachEvent){ //IE注册事件 192 var type = 'onmousewheel'; 193 document.attachEvent(type,scrollFunc); 194 }else if(document.addEventListener){ //Firefox注册事件 195 var type = 'DOMMouseScroll'; 196 document.addEventListener(type,scrollFunc,false); 197 } 198 } 199 }