原生javascript兼容性測試實(shí)例

更新時(shí)間：2013年07月01日 17:17:54 作者：

原生javascript兼容性：currentStyle、scrollTop、event以及綁定事件IE的綁定事件為attachEvent/detachEvent等等兼容性測試實(shí)例,感興趣的朋友可以參考下哈

1.獲取樣式表里面的width,border color 之類的css(不是行間) 主要是IE6-7支持currentStyle,標(biāo)準(zhǔn)瀏覽器支持getComputedStyle;

實(shí)例：封裝函數(shù)

復(fù)制代碼代碼如下:

 
function getStyle(obj,name){ 
if(obj.currentStyle){ 
return obj.currentStyle[name]; 
} 
else{ 
return getComputedStyle(obj,false)[name]; 
} 
} 

調(diào)用：getStyle('color');

2.獲取滾動(dòng)的距離
document.body.scrollTop 適用于標(biāo)準(zhǔn)瀏覽器
document.documentElement.scrollTop 適用于IE9以下版本
兼容性可以這樣寫
var top = document.body.scrollTop | document.documentElement.scrollTop;

3.事件對象
標(biāo)準(zhǔn)瀏覽器：事件對象作為事件函數(shù)的參數(shù)
IE低版本需要直接用event對象（全局）

復(fù)制代碼代碼如下:

 
function （ev）{ 
var event = ev || event; 
} 

現(xiàn)在event就作為了事件對象

4.綁定事件 IE 的綁定事件為 attachEvent/detachEvent(綁定或取消);標(biāo)準(zhǔn)瀏覽器 addEventListener/removeEventListener（綁定或取消）
以下是事件綁定或取消的參數(shù)，在事件綁定中函數(shù)不能是匿名函數(shù) 否則取消不掉
addEventListener的使用方式：

target.addEventListener(type, listener, useCapture);

target：文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。
type：字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：實(shí)現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target.attachEvent(type, listener);
target：文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。
type：字符串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：實(shí)現(xiàn)了 EventListener 接口或者是 JavaScript 中的函數(shù)。例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

事件綁定的封裝函數(shù)：

復(fù)制代碼代碼如下:

 
function addEvent(obj,ev,fn){ 
if(obj.attachEvent){ 
obj.attachEvent('on'+ev,fn) 
} 
else{ 
obj.addEventListener(ev, fn, false); 

} 
} 

這樣的封裝函數(shù)如果綁定事件fn函數(shù)里面用到this 需提防 this 為window(只有IE低版本有這個(gè)bug) 不是obj;

復(fù)制代碼代碼如下:

 
addEvent(document,'click',function(ev){ 

var ev=ev||window.event; 
var target = ev.target||ev.srcElement; // 獲得事件源 主要處理IE低版本this為window之bug 
alert(target) 
}); 

綁定之取消事件 fn為函數(shù)名字

復(fù)制代碼代碼如下:

 
function removeEvent(obj,ev,fn){ 
if(obj.detachEvent){ 
obj.detachEvent('on'+ev,fn) 
} 
else{ 
obj.removeEventListener(ev, fn, false); 

} 
} 

5.ajax
Ajax創(chuàng)建XMLHttp對象標(biāo)準(zhǔn)版瀏覽器與IE低版本不兼容
標(biāo)準(zhǔn)版創(chuàng)建XMLHttp對象：

復(fù)制代碼代碼如下:

 
//1.創(chuàng)建對象 
if(window.XMLHttpRequest) 
{ 
var oAjax=new XMLHttpRequest();//標(biāo)準(zhǔn)瀏覽器 
} 
else 
{ 
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE低版本 
} 
alert(oAjax); 

6.取消默認(rèn)事件
js中默認(rèn)事件取消是主要是兩種 return false 和 preventDefault
取消默認(rèn)事件中return false 是兼容任何瀏覽器但是如果遇到事件綁定的 addEventListener 會(huì)取消不掉默認(rèn)事件
取消默認(rèn)右鍵事件例子：

復(fù)制代碼代碼如下:

 
document.addEventListener('contextmenu',function(ev){ 
ev.preventDefault(); 
})) 
document.oncontextmenu = function(){ 
return false; 
} 

7.call與apply 的區(qū)別
call、apply 可以調(diào)用函數(shù)
例如

復(fù)制代碼代碼如下:

 
function show(){ 
alert(this) 
} 
//show(); 彈出window 
//show.call();彈出windwo 
//show.call(this) //彈出window 
//show.call(5); //彈出5; 
show.call(this,5); //彈出window 

call(this,arg1,arg2,...)可以看出call里面的參數(shù) this主要是指代事件對象以后參數(shù)是函數(shù)中用到的參數(shù)
用call與apply來主要是修改this的，功能上和普通的函數(shù)沒有什么太大的區(qū)別
apply(this,arguments) 主要是對參數(shù)不確定來使用
8、DOM取得子節(jié)點(diǎn)children和childNodes
children 取得子節(jié)點(diǎn) 只能是取第一層必須是標(biāo)簽節(jié)點(diǎn)
例如：

復(fù)制代碼代碼如下:

 
<span><a href="#">文字1</a></span> 
<span><a href="#">文字2</a></span> 

children[0] 這樣只能是取到第一個(gè)span 要是想取到第一個(gè)a標(biāo)簽 children[0].children[0],所以說children的長度只是2；
childNodes在高版本上會(huì)算上空文本在火狐谷歌上上面的是長度是5;在IE低版本（6-8）長度是4.

您可能感興趣的文章: