javaScript兼容性问题

javaScript兼容性问题

名称	高级浏览器	IE浏览器
获取DOM元素样式	getComputedStyle(dom)	dom.currentStyle
事件监听	addEventListener	attachEvent
移除事件监听	removeEventListener	detachEvent
事件对象获取	e	window.event
事件源	e.target	e.slcElement
阻止冒泡	e.stopPropagation()	e.cancelBubble=true - - - IE9及以上
阻止默认事件	e.preventDefault()	return false / window.event.returnValue=false
获取网页可视区域高度	window.innerHeight	document.documentElement.clientHeight

关于事件的e命名根据函数形参而定,e可以是任何名字

以下关于兼容写法

1.获取DOM元素样式

function getStyle(dom){
	if(window.getComputedStyle(dom)){
		return getComputedStyle(dom)
	}else{
		return dom.currentStyle
	}
}

2.事件监听

function eventListener(dom,type,handler,bool){
    bool = bool || false;
    if(window.addEventListener){
        return dom.addEventListener(type,handler,bool);
    }else{
        dom.attachEvent("on"+type,handler,bool);
    }
}

3.移除事件监听

function removeEvent(dom,type,handler,bool){
    bool = bool || false;
    if(window.removeEventListener){
        return dom.removeEventListener(type,handler,bool);
    }else{
        dom.detachEvent("on"+type,handler,bool);
    }
}

4.事件对象和事件源获取

function handler(e){
	var e = e || window.event;
	var target = e.target || e.srcELement;
}

5.阻止冒泡

function cancelBubble(event){
    if(window.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

6.取消默认事件

function preventDefault(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

7.获取页面可视化高度

var clientHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;

8.ajax请求

function ajax(){
    if(window.XMLHttpRequest){
       var xhr = new XMLHttpRequest();
    }else{
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

9. scrolltop滚动条高度

var scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;