js常见兼容问题总结

1、DOM样式操作

获取行内/非行内样式（不能用来设置，只能获取）
正常浏览器写法：
getComputedStyle(element, false).width 获取外部样式的宽度，false表示不是伪类。（IE9可以，IE8以下不支持）
IE浏览器写法：
element.currentStyle.width
封装getStyle 函数获取样式
function getStyle(ele,attr){ //ele元素，attr属性
if(ele.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}

        }

2、事件对象的获取

正常浏览器：事件处理函数的第一个参数 （ eve）
IE浏览器：通过window找event属性 （window.event）
兼容写法：
element.onclick = function(eve){
var e = eve || window.event;
console.log(e);
}

3、键盘事件对象

正常浏览器：e.keyCode
IE: e.which
兼容写法：
document.onkeydown = function(eve){
var e = eve || window.event;
var code = e.keyCode || e.which;
}

4、阻止事件冒泡

当内层元素的事件被触发时，会依次向上触发所有父级的相同事件
正常浏览器：e.stopPropagaction
IE浏览器：e.cancelBubble=true
兼容写法：封装一个名为stopBbble的函数
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}

5、阻止默认事件

系统提供了都属于默认
正常浏览器：e.preventDefaule()
IE浏览器：e.returnValue=false
兼容写法：
function stopDefault(e){
if(e.preventDefault){
e.preventDefault()
}else{
e.returnValue = false;
}
}

6、事件委托target的兼容

// 将多个子元素的相同事件，加给共同的现有的父元素，实现节省事件的目的
正常浏览器：e.target
IE浏览器：e.srcElement
兼容写法：
var target=e.target||e.srcElement

7、绑定事件与删除事件

正常浏览器写法：
绑定事件的两种方式
赋值式绑定事件（只能绑定一次）
obox.οnclick=function(){
console.log(1);
}
删除赋值式绑定事件：obox.οnclick=null;
监听式绑定事件(可以重复)
obox.addElementListener=(“click”,function(){
console.log(“hello”);
},false)
删除监听式绑定事件
obox.addElementListener=(“click”,fn1,flase)
function fn1(){
console.log(2);
}
obox.removeElementListener=(“click”,fn1,false);
IE浏览器写法
绑定事件：
obox.attachEvent(“onclick”, function(){
console.log(1);
})
删除事件
obox.detachEvent(“onclick”,fn1)
注意写法：IE浏览器事件区别于正常浏览器要加on
绑定事件的兼容写法：
function addEvent(ele,type,cb){ //ele参数 type事件类型 cb回调函数
if(ele.attachEvent){
ele.attachEvent(“on”+type,cb)
}else{
ele.addEventListener(type,cb,false)
}
}
删除事件的兼容写法
function removeEvent(ele,type,cb){
if(ele.detachEvent){
ele.detachEvent(“on”+type,cb)
}else{
ele.removeEventListener(type,cb,false)
}
}