首頁 > web前端 > js教程 > 原生javascript相容性測試實例_javascript技巧

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

WBOY
發布: 2016-05-16 17:30:34
原創
1045 人瀏覽過

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 取得子節點只能是取第一層必須是標籤節點
例如: 代碼如下:

children[0] 這樣只能是取到第一個span 要是想取到第一個a標籤children[0].children[0 ],所以說children的長度只是2; childNodes在高版本上會算上空文本在火狐谷歌上上面的是長度是5;在IE低版本(6-8)長度是4.
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板