原生javascript相容性測試實例_javascript技巧

1.取得樣式表裡面的width,border color 之類的css(不是行間) 主要是IE6-7支援currentStyle,標準瀏覽器支援getComputedStyle;

實例：封裝函數

複製程式碼 程式碼如下:

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

>呼叫：getStyle('color'); 2.取得滾動的距離document.body.scrollTop 適用於標準瀏覽器document.documentElement.scrollTop 適用於IE9以下版本document.documentElement.scrollTop 適用於IE9以下版本

相容性可以這樣寫

var top = document.body.scrollTop | document.documentElement.scrollTop;

3.事件物件
標準瀏覽器：事件物件作為事件函數的參數
IE低版本需要直接用event物件（全域）

複製程式碼


程式碼如下:



程式碼如下:


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


現在event就作為了事件物件

4.綁定事件IE 的綁定事件IE 的綁定事件對象

4.定事件為attachEvent/detachEvent(綁定或取消);標準瀏覽器addEventListener/removeEventListener（綁定或取消） 以下是事件綁定或取消的參數，在事件綁定中函數不能是匿名函數否則取消不掉addEventListener的使用方式： target.addEventListener(type, listener, useCapture); target： 文件節點、document、window 或XMLHttpRequest。

type： 字串，事件名稱，不含“on”，如“click”、“mouseover”、“keydown”等。

listener ：實作了 EventListener 介面或是 JavaScript 中的函式。
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);

IE中：

target .attachEvent(type, listener);
target： 文件節點、document、window 或XMLHttpRequest。
type： 字串，事件名稱，含“on”，如“onclick”、“onmouseover”、“onkeydown”等。
listener ：實作了 EventListener 介面或是 JavaScript 中的函式。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

事件綁定的封裝函數：

複製程式碼 程式碼如下:

function addEvent(obj,ev,fn){

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

}
}

}

這樣的封裝函數如果綁定事件fn函數裡面用到this 需提防this 為window(只有IE低版本有這個bug) 不是obj; 複製程式碼

程式碼如下:


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

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

綁定之取消事件fn為函數名字

複製程式碼 程式碼:複製程式碼

程式碼:

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

}
}

5.ajax Ajax創建XMLHttppttp低版本不兼容標準版創建XMLHttp對象： 複製代碼 代碼如下: //1.建立物件if(window.XMLHttpRequest) { var oAjax=new XMLHttpRequest();//標準瀏覽器} else { { var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE低版本} alert(oAjax);
6.取消預設事件
js中預設事件取消是主要是兩種return false 和preventDefault
取消預設事件中return false 是相容任何瀏覽器但是如果遇到事件綁定的addEventListener 會取消不掉預設事件
取消預設右鍵事件範例：

複製程式碼 程式碼如下:

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

7.call與apply 的區別
call、apply 可以調用函數
例如

複製代碼

程式碼如下:

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裡面的參數this主要是指涉事件物件以後參數是函數中用到的參數
用call與apply來主要是修改this的，功能上和普通的函數沒有太大的區別
apply(this,arguments) 主要是對參數不確定來使用
8、DOM取得子節點children和childNodes
children 取得子節點只能是取第一層必須是標籤節點
例如：

複製代碼

代碼如下:

文字1
文字2

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