DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 原生javascript兼容性測試實例
原生javascript兼容性測試實例
編輯:JavaScript綜合知識     
原生javascript兼容性:currentStyle、scrollTop、event以及綁定事件IE的綁定事件為attachEvent/detachEvent等等兼容性測試實例,感興趣的朋友可以參考下哈  

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

實例:封裝函數

復制代碼 代碼如下:
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}


調用:getStyle('color');

2.獲取滾動的距離
document.body.scrollTop 適用於 標准浏覽器
document.documentElement.scrollTop 適用於IE9以下版本
兼容性可以這樣寫
var top = document.body.scrollTop | document.documentElement.scrollTop;

3.事件對象
標准浏覽器:事件對象作為事件函數的參數
IE低版本 需要直接用event對象(全局)

復制代碼 代碼如下:
function (ev){
var event = ev || event;
}


現在event就作為了事件對象

4.綁定事件 IE 的綁定事件為 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創建XMLHttp對象 標准版浏覽器與IE低版本不兼容
標准版創建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 false;
}


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

復制代碼 代碼如下:
<span><a href="#">文字1</a></span>
<span><a href="#">文字2</a></span>


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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved