原生javascript相容性

來源:互聯網
上載者:User

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之bugalert(target)});綁定之取消事件 fn為函數名字function removeEvent(obj,ev,fn){if(obj.detachEvent){      obj.detachEvent('on'+ev,fn)}else{obj.removeEventListener(ev, fn, false);
}}5.ajaxAjax建立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); //彈出windowcall(this,arg1,arg2,...)可以看出call裡面的參數 this主要是指代事件對象 以後參數是函數中用到的參數用call與apply來主要是修改this的,功能上和普通的函數沒有什麼太大的區別apply(this,arguments) 主要是對參數不確定來使用8、DOM取得子節點children和childNodeschildren 取得 子節點 只能是取第一層 必須是標籤節點例如:<span><a href="#">文字1</a></span>          <span><a href="#">文字2</a></span>children[0] 這樣只能是取到第一個span 要是想取到第一個a標籤 children[0].children[0],所以說children的長度只是2;childNodes在高版本上會算上空文本 在Firefox Google上 上面的是長度是5;在IE低版本(6-8)長度是4.

......未完待續

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.