搜集的常用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 }

 

你可能感兴趣的:(浏览器)