常用浏览器兼容之JS兼容

主要参考：https://caniuse.com/

1. 整体

不完整总结，陌生的支持自行查询caniuse

2. 具体

2.1 DOM 事件篇

2.1.1 回调绑定

DOM的回调绑定主要流行用addEventListener()，但是由于IE6-8都不支持，只能用attachEvent()替换，故常用的兼容写法——bind函数封装如下：

function bind(obj,eventStr,callback){
	if(obj.addEventListener){
		obj.addEventListener(eventStr, callback, false);
	}else{
		obj.attachEvent("on"+eventStr,function(){
			callback.call(obj)
		})
	}
}

2.1.2 具体事件回调函数传参兼容

如onmousemove鼠标移动事件：
一般写法

xxx.onmousemove = function(e){}

但在IE8中不支持这样把e传参，但在window.event中可以查询到该对象。故兼容写法如下：

xxx.onmousemove = function(e){
	e = e||window.event;
}

2.1.3 特殊的事件兼容

如：onmousewheel鼠标滚轮事件

一般写法：

box.onmousewheel = function(e){
	//....
}

但 火狐 不支持这样写，火狐的写法：
用到了上面的bind封装

bind(box,"DOMMouseScroll",function(e){
	//....
})

综合起来的兼容写法：

box.onmousewheel  = function(e){
	//...
};
bind(box,"DOMMouseScroll",box.onmousewheel);

注意，这个特殊的事件API还有很多兼容

• 取消默认行为（即取消监听鼠标滚轮事件）
  如果是“on”监听情况：直接在后面return false;
  如果是addEventListener情况，这还要看是不是IE8了
  不是IE8，用event.preventDefault();
  故兼容写法event.preventDefault&&event.preventDefault()
• 滚动方向的监听（判断是向上滚动还是向下滚动）
  一般的判断（由onmousewheel绑定的）
  event.wheelDetal，>0 上滚动，<0下滚
  火狐中的判断（由DOMMouseScroll绑定的）
  event.detai，<0 上滚，>0下滚；

2.2 DOM 查询类

2.2.1 getElementsByClassName

这个经常会有需求，但是，IE9不支持这种写法

2.2.2 后代查询

如.firstElementChild在IE8以下不兼容，故尽量不要使用这个

2.2.3 兄弟父亲查询

如.previousElementSibling在IE8以下不兼容，故尽量不要使用这个

2.2.4 查询样式

如getComputedStyle，在IE8以下不兼容，但可以用 obj.currentStyle[name]，故兼容写法——getStyle函数的封装：

function getStyle(obj,name){
	if(window.getComputedStyle){
		return getComputeStyle(obj,null)[name];
	}else{
	//IE8兼容
		return obj.currentStyle[name];
	}
}

2.3 BOM 类

这里只聊聊如何抓浏览器

• 抓火狐——正则匹配法

 var ua = navigator.userAgent
if(/firefox/i.test(ua)){...}

• 抓IE（包括IE10）——IE指纹法

if("ActiveXObject" in window)

2.4 其他常用对象兼容-JSON对象

IE7及以下不支持JSON

兼容方法：引入外部转换脚本JS文件即可

如果有不同或者错误的地方，欢迎在评论区指出来~
如果觉得对您有点用，那我也臭不要脸得要个大拇指支持支持,我也会过去给你支持支持（商业互吹不好吗）