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;