javascript兼容性大盘点

最近整理了一下关于前端的javascript的一些不同浏览器的兼容性问题。

1、Js获取非行间样式：
obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
Chrome、FireFox、IE9+： getComputedStyle(obj,false)[name]，IE8-报错
IE： obj.currentStyle[name]，在Chrome和FireFox下不报错，返回undefine
因此，拿obj.currentStyle做判断条件，如果obj.currentStyle为真，那么使用obj.currentStyle[name]获得样式，否则使用getComputedStyle(obj,false)[name]
还有一种写法是(obj.currentStyle || getComputedStyle(obj,false))[name]

2、DOM操作的各种不兼容情况：
父元素.firstElementChild || 父元素.firstChild
父元素.lastElementChild || 父元素.lastChild
子元素.previousElementSibling || 子元素.previousSibling
子元素.nextElementSibling || 子元素.nextSibling

3、body滚动距离
FireFox和IE: document.documentElement.scrollTop
Chrome: document.body.scrollTop
两者无先后顺序，若获取不到返回0

4、ev的兼容性
function(ev){
var oEvent = ev||event;
}
IE8-能够兼容event,ev是undefined
FireFox是ev,而event则报错
chrome两个都兼容

5、’use strict’
兼容高版本浏览器：chrome，FF,IE10+
不兼容IE9-

6、文本框文字输入事件
FireFox、Chrome和IE9+： obj.oninput
IE10-: obj.onpropertychange

7、事件绑定与解除绑定
FireFox、Chrome和IE9+： obj.addEventListener(‘事件名’,fn,false) obj.removeEventListener(‘事件名’,fn,false)
IE8-: obj.attachEvent(‘on’+’事件名’,fn) obj.detachEvent(‘on’+’事件名’,fn)

8、鼠标滚轮事件
Chrome、IE: mousewheel
FireFox: DOMMouseScroll
判断滚轮滚动方向
Chrome、IE: oEvent.wheelDelta
FireFox: oEvent.detail

9、阻止默认事件
FireFox、Chrome、IE9+: oEvent.preventDefault&&oEvent.preventDefault()
IE低版本： return false
但return false遇到事件绑定会失效。为了兼容IE低版本，使用事件捕获。

10、鼠标移动
Chrome、IE: oEvent.fromElement(鼠标移入)
oEvent.toElement(鼠标移出)
FireFox: oEvent.relatedTarget(鼠标移入)
oEvent.relatedTarget(鼠标移出)

11、DOMready
FireFox、Chrome、IE9+: DOMContentLoaded
IE低版本： document.onreadystatechange
当docu.readystate == ‘complete’时表示加载完成
但是上面两者略微有点不同， DOMContentLoaded是指加载完js、css、HTML后，而onreadystatechange与onload有点相似

12、事件委托
oEvent.srcElement || oEvent.target

13、获取鼠标位置
高版本浏览器中： x轴：oEvent.pageX y轴：oEvent.pageY
低版本： oEvent.clientX+scrollLeft oEvent.clientY+scrollTop

14、ajax对象
Chrome、FireFox: XMLHttpRequest => var oAjax = new XMLHttpRequest();
IE: ActiveXObject => var oAjax = new ActiveXObjext(‘Microsoft.XMLHTTP’)