搜集的常用JS跨浏览器判断,各位可以加到自己的js库中

由于工作和个人学习,很久没有更新自己的博客了,今天被朋友提醒了下就来发一篇随便,请大家多多指点!!!

所有的方法都是封装过得,大家可以直接添加到自己的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 }
原文地址:https://www.cnblogs.com/afuge/p/2852754.html