js兼容问题

获取非行内样式的兼容方式

复制代码

function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
}
}

复制代码

获取事件对象的兼容方式

document.οnclick=function(eve){
var e=eve||window.event;
console.log(e);
}

事件冒泡的兼容方法

复制代码
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;//兼容ie
}
}
复制代码

阻止浏览器默认行为的兼容方法

if( e.preventDefault ){
    e.preventDefault();
}else{
    window.event.returnValue = false;//ie
}

监听事件的设置和移除的兼容方式

复制代码
1.封装成对象的方式
var EventUtil={
addHandler:function(DOM,EventType,fn){
if(DOM.addEventListener){
DOM.addEventListener(EventType,fn,false);
}else if(DOM.attachEvent){
DOM.attachEvent(‘on’+EventType,fn)
}else{
DOM[‘on’+EventType]=fn
}
},
removeHandler:function(DOM,EventType,fn){
if(DOM.removeEventListener){
DOM.removeEventListener(EventType,fn,false)
}else if(DOM.detachEvent){
DOM.detachEvent(‘on’+EventType,fn)
}else{
DOM[‘on’+EventType]=null;
}
}
}

2.封装成两个函数的方式
function addEvent(obj,inci,back){
if(obj.addEventListener){
obj.addEventListener(inci,back);
}else if(obj.attachEvent){
obj.attachEvent(“on” + inci,back);
}else{
obj[“on”+inci] = back;
}
}

function removeEvent(obj,inci,back){
    if(obj.removeEventListener){
        obj.removeEventListener(inci,back,false);
    }else if(obj.detachEvent){
        obj.detachEvent("on" + inci,back);
    }else{
        obj["on"+inci] = null;
    }
}

复制代码

事件委托的兼容方法

复制代码
var oul = document.querySelector(“ul”)
oul.onclick = function(eve){
var e = eve || window.event;

    var t = e.target || e.srcElement;

    if(t.getAttribute("abc") == "l"){
        console.log(e.target.innerHTML)
    }
    
}

复制代码

键盘事件的兼容方法

var eve = eve||window.event;
var keyC = eve.keyCode||eve.which;

1. List item