javascript 相容於所有瀏覽器的DOM擴充功能_javascript技巧

今天週五，很閒，坐在電腦前沒事可做，產品線的人也沒提什麼新的需求，可能下週會有新的需求和工作安排，但那是下週的事了。今天就想寫點技術的東西，也就當作是記記筆記，本人水平有限，希望大家多多指教，嘴下留情，哈哈。
　　有時候我們會想擴展DOM元素的功能，可以添加一些自訂的方法，以讓它用起來更加靈活、方便；先來舉個例子：

複製程式碼 程式碼如下:

 

 

 
 
 
 
    你好
   
 

 
 
複製程式碼 程式碼如下:

 
 
 
 
    你好
   
 

以上這段程式碼就是功能擴充後的最終效果，它與上一段程式碼實現的功能是一樣的，但現在它還不能執行，要進行擴充後才可以，在此之前先來看一些基礎知識，這很重要，因為等下會用到：
　　1、HTMLElement，在DOM標準中，每個元素都繼承自HTMLElement，而HTMLElement又繼承自Element，Element又繼承自Node；於是我們可以使用HTMLElement的Prototype來擴充HTML元素的方法與屬性，如何實作？我們來看一段程式碼：

複製程式碼 程式碼如下:

 
 
 
 
    你好
   
 



以上程式碼在頁面載入的時候就彈出“這是一個擴充方法”，不過相信你已經注意到了，在IE6,7,8裡面會出錯，但在IE9以上或Chrome,Firefox,Opera這些瀏覽器裡面都能正常運作，這是相容性問題，別擔心，後面會解決。
　　以上的程式碼彈性不夠好，我們優化一下，讓它更有彈性：

複製程式碼 程式碼如下:

 
 
 
 
    你好
   
 



從上述程式碼可以看出，有了DOMExtend這個方法以後，我們就可以透過傳入不用的name 和fn 來實現不同的擴充。
　　2、以上講完了HTMLElement，接下來講講事件的綁定，很多人都知道，IE和其他瀏覽器的事件綁定方式不一樣，實現兼容所有瀏覽器的事件綁定的代碼如下：

複製程式碼 程式碼如下:function BindEvent(elem,event,eventfun){    if(elem.addEventListener){

        elem.addEventListener(event,fun,false);

    } );
    }
}


以下是事件綁定的使用例子：

複製代碼

代碼如下:  

 > 

  head>
 
    你好
   

 
 
 
 
    你好
   

複製代碼


代碼如下:

 
 

 
    你好
   
   name, fn){
            if(typeof(HTMLElement)!="undefined"){
                }
            else{
               var _getElementById=document.getElementById;
                       var _elem=_getElementById(id);
              return _elem;
               }
                  document.getElementsByTagName=function(tag){
                          var len=_elem.length;
                  ,(var i=0;i      =「fn」) ;
                    }
         
                }
                var var _createElement=document.createElement;
                document.createElement=function(tag){
                    var _elem=_create元素(標籤);
                    eval("_elem." name " =" fn);
                   return _elem;
          var _documentElement=document.documentElement;
                eval("_documentElement." name "=" fn);
                var _documentBody=document.body;
                 }
        }
        function BindEvent(活動，有趣){               this.addEventListener(event,fun,false);
   
            else{
               ,       }
        DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA" );
        wrap.bind("click",function(){
            alert(this. nerHTML);



OK，目前為止已經解決了相容性問題，這是所有瀏覽器都能順利通過的DOM元素擴展的代碼，但是這樣還有一個小問題，細心的人會發現在IE瀏覽器裡面彈出的結果是"undefined"，而不是"你好"；問題的原因在於IE的事件綁定上，看以上代碼，當調用alert(this.innerHTML)的時候，由於IE綁定事件用的是attachEvent，這時候this指向的是windows，於是現在的目標的要改變this指向的對象，將this指向tagA。於是經過修改，完整程式碼如下：

複製程式碼

程式碼如下:

 
 

 
    你好
   
   name, fn){
            if(typeof(HTMLElement)!="undefined"){
                }
            else{
               var _getElementById=document.getElementById;
                       var _elem=_getElementById(id);
              return _elem;
               }
                  document.getElementsByTagName=function(tag){
                          var len=_elem.length;
                  ,(var i=0;i      =「fn」) ;
                    }
         
                }
                var var _createElement=document.createElement;
                document.createElement=function(tag){
                    var _elem=_create元素(標籤);
                    eval("_elem." name " =" fn);
                   return _elem;
          var _documentElement=document.documentElement;
                eval("_documentElement." name "=" fn);
                var _documentBody=document.body;
                 }
        }
        function BindEvent(活動，有趣){               this.addEventListener(event,fun,false);
   
            else{
                var tag unction(){
                    fun.apply(tag,arguments);//這裡是關鍵            }
        }
           wrap.bind("click",function(){
           警報(this.innerHTML);
        })
   
    })