兼容所有瀏覽器的DOM擴(kuò)展功能

作者：學(xué)明 2012-08-02 10:21:49

技術(shù)文章寫得少，所以有時候想寫點什么卻下不了手，不知道該寫什么；往往到了準(zhǔn)備要寫的時候才發(fā)現(xiàn)自己想寫的東西其實很無聊，甚至覺得很幼稚，于是又關(guān)掉了編緝器，呵呵。

今天周五，很閑，坐在電腦前沒什么事可做，產(chǎn)品線的人也沒提什么新的需求，可能下周會有新的需求和工作安排，但那是下周的事了。今天就想寫點技術(shù)的東西，也就當(dāng)作是記記筆記，本人水平有限，希望大家多多指教，嘴下留情，哈哈。

有時候我們會想擴(kuò)展DOM元素的功能，可以添加一些自定義的方法，以讓它用起來更加靈活、方便；先來舉個例子：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能擴(kuò)展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
        var tagA=document.getElementById("tagA");  
        tagA.onclick=function(){  
            alert(this.innerHTML);  
        }  
    //--> 
    </script> 
 </body> 
</html>

毫無疑問，從以上代碼可以看出，當(dāng)點擊A標(biāo)簽的時候會彈出“你好”，tagA是一個DOM元素，除了有onclick事件以外，還有onmouseover,onmouseout,onmousemove等等，而這些事件都是DOM元素本身就具有的；但現(xiàn)在我們希望對它進(jìn)行擴(kuò)展，例如可以讓它支持tagA.bind，我可以用tagA.bind("click",function(){}),來代替tagA.onclick=function(){}。OK，現(xiàn)在的目的很明確，先看下面的代碼：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能擴(kuò)展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
        var tagA=document.getElementById("tagA");  
        tagA.bind("click",function(){  
            alert(this.innerHTML);  
        })  
    //--> 
    </script> 
 </body> 
</html>

以上這段代碼就是功能擴(kuò)展后的最終效果，它與上一段代碼實現(xiàn)的功能是一樣的，但現(xiàn)在它還不能執(zhí)行，要進(jìn)行擴(kuò)展后才可以，在此之前先來看一些基礎(chǔ)知識，這很重要，因為等下會用到：

　　1、HTMLElement，在DOM標(biāo)準(zhǔn)中，每個元素都繼承自HTMLElement，而HTMLElement又繼承自Element，Element又繼承自Node；于是我們可以使用HTMLElement的Prototype來擴(kuò)展HTML元素的方法和屬性，如何實現(xiàn)？我們來看一段代碼：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能擴(kuò)展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
    HTMLElement.prototype.Alert=function(){  
        alert("這是一個擴(kuò)展方法");  
    }  
    var tagA=document.getElementById("tagA");  
    tagA.Alert();  
    //--> 
    </script> 
 </body> 
</html>

以上代碼在頁面加載的時候就彈出“這是一個擴(kuò)展方法”，不過相信你已經(jīng)注意到了，在IE6,7,8里面會出錯，但在IE9以上或者Chrome,Firefox,Opera這些瀏覽器里面都能正常運行，這是兼容性問題，不用擔(dān)心，后面會解決。

以上的代碼靈活性不夠好，我們優(yōu)化一下，讓它更加靈活：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能擴(kuò)展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
        function DOMExtend(name,fn){  
            eval("HTMLElement.prototype."+name+"="+fn);//這里我們采用動態(tài)擴(kuò)展  
        }  
        function Alert(){  
            alert("這是一個擴(kuò)展方法");  
        }  
        DOMExtend("Alert",Alert);  
 
        var tagA=document.getElementById("tagA");  
        tagA.Alert();  
    //--> 
    </script> 
 </body> 
</html>

從以上代碼可以看出，有了DOMExtend這個方法以后，我們就可以通過傳入不用的name 和 fn 實現(xiàn)不同的擴(kuò)展。

2、以上講完了HTMLElement，接下來講講事件的綁定，很多人都知道，IE和其他瀏覽器的事件綁定方式不一樣，實現(xiàn)兼容所有瀏覽器的事件綁定的代碼如下：

function BindEvent(elem,event,fun){  
    if(elem.addEventListener){  
        elem.addEventListener(event,fun,false);  
    }  
    else{  
        elem.attachEvent("on"+event,fun);  
    }  
}

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

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能擴(kuò)展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
        function BindEvent(elem,event,fun){  
            if(elem.addEventListener){  
                elem.addEventListener(event,fun,false);  
            }  
            else{  
                elem.attachEvent("on"+event,fun);  
            }  
        }  
        var tagA=document.getElementById("tagA");  
        function Alert(){  
            alert("這是事件綁定");  
        }  
        BindEvent(tagA,"click",Alert);  
    //--> 
    </script> 
 </body> 
</html>

以上代碼運行后，點擊“你好”就會彈出“這是事件綁定”，這里值得一提的就是addEvenListener的第三個參數(shù)，這里的值是false，意思是取消Capture方式而采用冒泡方式。標(biāo)準(zhǔn)的事件有兩種觸發(fā)方式，一種是捕獲型（caputre），另一種是冒泡型；而IE只支持冒泡型。捕獲型的特點是觸發(fā)方式是從外到內(nèi)的方式觸發(fā)事件，而冒泡型就是從內(nèi)到外的方式觸發(fā)事件，假設(shè)以上代碼的A元素外層包了一個DIV元素，如果A元素與它的父元素DIV都有一個onclick事件，那么冒泡型就是點擊A的時候會先觸發(fā)A的事件，然后再觸發(fā)DIV的事件，反之就是捕獲型。

OK，相信通過以上的分析，對HTMLElement擴(kuò)展和事件綁定都有了相當(dāng)?shù)牧私猓Y(jié)合這兩個知識點，我們可以寫出如下的代碼：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能擴(kuò)展</title> 
 </head> 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
    <!--  
        function DOMExtend(name,fn){  
            eval("HTMLElement.prototype."+name+"="+fn);//這里我們采用動態(tài)擴(kuò)展  
        }  
 
        function BindEvent(event,fun){  
            if(this.addEventListener){//執(zhí)行完DOMExtend后，這里的this會指向HTMLElement  
                this.addEventListener(event,fun,false);//標(biāo)準(zhǔn)的事件綁定  
            }  
            else{  
                this.attachEvent("on"+event,fun);//IE的事件綁定  
            }  
        }  
 
        DOMExtend("bind",BindEvent);//執(zhí)行功能擴(kuò)展  
 
        var tagA=document.getElementById("tagA");  
          
        tagA.bind("click",function(){//這就是我們最終要實現(xiàn)的功能  
            alert(this.innerHTML);  
        })  
 
    //--> 
    </script> 
 </body> 
</html>

執(zhí)行以上這個頁面，在IE9,Chrome,Opera,Firefox等標(biāo)準(zhǔn)瀏覽器里都能正常觸發(fā)tagA的點擊事件，于是現(xiàn)在只剩下一個問題，就是要兼容其他瀏覽器；IE瀏覽器之所以出錯，是因為它們隱藏了對HTMLElement的訪問，于是針對IE瀏覽器，我們就不能用HTMLElement.prototype來進(jìn)行擴(kuò)展了，但我們可以通過重寫以下幾個函數(shù)來達(dá)到目的：

document.getElementById

document.getElementsByTagName

document.createElement

document.documentElement

document.body

（PS：記憶中獲取DOM元素好像就是以上這些方法了～不知道還有沒有其他）

重寫后，再進(jìn)行一些處理變換就可以得到以下完整的頁面代碼：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能擴(kuò)展</title> 
 </head> 
 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
        function DOMExtend(name, fn){  
            if(typeof(HTMLElement)!="undefined"){  
                eval("HTMLElement.prototype."+name+"="+fn);  
            }  
            else{  
                var _getElementById=document.getElementById;  
                document.getElementById=function(id){  
                    var _elem=_getElementById(id);  
                    eval("_elem."+name+"="+fn);  
                    return _elem;  
                }  
 
                var _getElementByTagName=document.getElementsByTagName;  
                document.getElementsByTagName=function(tag){  
                    var _elem=_getElementByTagName(tag);  
                    var len=_elem.length;  
                    for(var i=0;i<len;i++){  
                        eval("_elem["+i+"]."+name+"="+fn);  
                    }  
                    return _elem;  
                }  
 
                var _createElement=document.createElement;  
                document.createElement=function(tag){  
                    var _elem=_createElement(tag);  
                    eval("_elem."+name+"="+fn);  
                    return _elem;  
                }  
 
                var _documentElement=document.documentElement;  
                eval("_documentElement."+name+"="+fn);  
 
                var _documentBody=document.body;  
                eval("_documentBody."+name+"="+fn);  
            }  
        }  
 
        function BindEvent(event,fun){  
            if(this.addEventListener){  
                this.addEventListener(event,fun,false);  
            }  
            else{  
                this.attachEvent("on"+event,fun);  
            }  
        }  
 
        DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");  
 
        wrap.bind("click",function(){  
            alert(this.innerHTML);  
        })  
    </script> 
 </body> 
</html>

OK，目前為止已經(jīng)解決了兼容性問題，這是所有瀏覽器都能順利通過的DOM元素擴(kuò)展的代碼，但是這樣還有一個小問題，細(xì)心的人會發(fā)現(xiàn)在IE瀏覽器里面彈出的結(jié)果是"undefined"，而不是"你好"；問題的原因在于IE的事件綁定上，看以上代碼，當(dāng)調(diào)用alert(this.innerHTML)的時候，由于IE綁定事件用的是attachEvent，這時候this指向的是windows，于是現(xiàn)在的目標(biāo)的要改變this指向的對像，將this指向tagA。于是經(jīng)過修改，完整代碼如下：

<!DOCTYPE html> 
<html lang="zh"> 
 <head> 
  <title>DOM功能擴(kuò)展</title> 
 </head> 
 
 <body> 
    <a href="javascript:void(0)" id="tagA">你好</a> 
    <script type="text/javascript"> 
        function DOMExtend(name, fn){  
            if(typeof(HTMLElement)!="undefined"){  
                eval("HTMLElement.prototype."+name+"="+fn);  
            }  
            else{  
                var _getElementById=document.getElementById;  
                document.getElementById=function(id){  
                    var _elem=_getElementById(id);  
                    eval("_elem."+name+"="+fn);  
                    return _elem;  
                }  
 
                var _getElementByTagName=document.getElementsByTagName;  
                document.getElementsByTagName=function(tag){  
                    var _elem=_getElementByTagName(tag);  
                    var len=_elem.length;  
                    for(var i=0;i<len;i++){  
                        eval("_elem["+i+"]."+name+"="+fn);  
                    }  
                    return _elem;  
                }  
 
                var _createElement=document.createElement;  
                document.createElement=function(tag){  
                    var _elem=_createElement(tag);  
                    eval("_elem."+name+"="+fn);  
                    return _elem;  
                }  
 
                var _documentElement=document.documentElement;  
                eval("_documentElement."+name+"="+fn);  
 
                var _documentBody=document.body;  
                eval("_documentBody."+name+"="+fn);  
            }  
        }  
 
        function BindEvent(event,fun){  
            if(this.addEventListener){  
                this.addEventListener(event,fun,false);  
            }  
            else{  
                var tag=this;  
                tag.attachEvent("on"+event,function(){  
                    fun.apply(tag,arguments);//這里是關(guān)鍵  
                });  
            }  
        }  
 
        DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");  
 
        wrap.bind("click",function(){  
            alert(this.innerHTML);  
        })  
    </script> 
 </body> 
</html>

原文鏈接：http://www.cnblogs.com/xueming/archive/2012/07/30/2615077.html

責(zé)任編輯：林師授來源：博客園

DOM 瀏覽器

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

兼容所有瀏覽器的DOM擴(kuò)展功能