编程 Javascript

javascript 兼容所有浏览器的DOM扩展功能

Posted in Javascript onAugust 01, 2012

今天周五，很闲，坐在电脑前没什么事可做，产品线的人也没提什么新的需求，可能下周会有新的需求和工作安排，但那是下周的事了。今天就想写点技术的东西，也就当作是记记笔记，本人水平有限，希望大家多多指教，嘴下留情，哈哈。

有时候我们会想扩展DOM元素的功能，可以添加一些自定义的方法，以让它用起来更加灵活、方便；先来举个例子：

<!DOCTYPE html>
<html lang="zh">
 <head>
  <title>DOM功能扩展</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>

毫无疑问，从以上代码可以看出，当点击A标签的时候会弹出“你好”，tagA是一个DOM元素，除了有onclick事件以外，还有onmouseover,onmouseout,onmousemove等等，而这些事件都是DOM元素本身就具有的；但现在我们希望对它进行扩展，例如可以让它支持tagA.bind，我可以用tagA.bind("click",function(){}),来代替tagA.onclick=function(){}。OK，现在的目的很明确，先看下面的代码：

<!DOCTYPE html>
<html lang="zh">
 <head>
  <title>DOM功能扩展</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>

以上这段代码就是功能扩展后的最终效果，它与上一段代码实现的功能是一样的，但现在它还不能执行，要进行扩展后才可以，在此之前先来看一些基础知识，这很重要，因为等下会用到：

1、HTMLElement，在DOM标准中，每个元素都继承自HTMLElement，而HTMLElement又继承自Element，Element又继承自Node；于是我们可以使用HTMLElement的Prototype来扩展HTML元素的方法和属性，如何实现？我们来看一段代码：

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

以上代码在页面加载的时候就弹出“这是一个扩展方法”，不过相信你已经注意到了，在IE6,7,8里面会出错，但在IE9以上或者Chrome,Firefox,Opera这些浏览器里面都能正常运行，这是兼容性问题，不用担心，后面会解决。

以上的代码灵活性不够好，我们优化一下，让它更加灵活：

<!DOCTYPE html>
<html lang="zh">
 <head>
  <title>DOM功能扩展</title>
 </head>
 <body>
    <a href="javascript:void(0)" id="tagA">你好</a>
    <script type="text/javascript">
    <!--
        function DOMExtend(name,fn){
            eval("HTMLElement.prototype."+name+"="+fn);//这里我们采用动态扩展
        }
        function Alert(){
            alert("这是一个扩展方法");
        }
        DOMExtend("Alert",Alert);
        var tagA=document.getElementById("tagA");
        tagA.Alert();
    //-->
    </script>
 </body>
</html>

从以上代码可以看出，有了DOMExtend这个方法以后，我们就可以通过传入不用的name 和 fn 实现不同的扩展。

2、以上讲完了HTMLElement，接下来讲讲事件的绑定，很多人都知道，IE和其他浏览器的事件绑定方式不一样，实现兼容所有浏览器的事件绑定的代码如下：

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功能扩展</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的第三个参数，这里的值是false，意思是取消Capture方式而采用冒泡方式。标准的事件有两种触发方式，一种是捕获型（caputre），另一种是冒泡型；而IE只支持冒泡型。捕获型的特点是触发方式是从外到内的方式触发事件，而冒泡型就是从内到外的方式触发事件，假设以上代码的A元素外层包了一个DIV元素，如果A元素与它的父元素DIV都有一个onclick事件，那么冒泡型就是点击A的时候会先触发A的事件，然后再触发DIV的事件，反之就是捕获型。

OK，相信通过以上的分析，对HTMLElement扩展和事件绑定都有了相当的了解，结合这两个知识点，我们可以写出如下的代码：

<!DOCTYPE html>
<html lang="zh">
 <head>
  <title>DOM功能扩展</title>
 </head>
 <body>
    <a href="javascript:void(0)" id="tagA">你好</a>
    <script type="text/javascript">
    <!--
        function DOMExtend(name,fn){
            eval("HTMLElement.prototype."+name+"="+fn);//这里我们采用动态扩展
        }
        function BindEvent(event,fun){
            if(this.addEventListener){//执行完DOMExtend后，这里的this会指向HTMLElement
                this.addEventListener(event,fun,false);//标准的事件绑定
            }
            else{
                this.attachEvent("on"+event,fun);//IE的事件绑定
            }
        }
        DOMExtend("bind",BindEvent);//执行功能扩展
        var tagA=document.getElementById("tagA");
        tagA.bind("click",function(){//这就是我们最终要实现的功能
            alert(this.innerHTML);
        })
    //-->
    </script>
 </body>
</html>

执行以上这个页面，在IE9,Chrome,Opera,Firefox等标准浏览器里都能正常触发tagA的点击事件，于是现在只剩下一个问题，就是要兼容其他浏览器；IE浏览器之所以出错，是因为它们隐藏了对HTMLElement的访问，于是针对IE浏览器，我们就不能用HTMLElement.prototype来进行扩展了，但我们可以通过重写以下几个函数来达到目的：

document.getElementById

document.getElementsByTagName

document.createElement

document.documentElement

document.body

（PS：记忆中获取DOM元素好像就是以上这些方法了～不知道还有没有其他）

重写后，再进行一些处理变换就可以得到以下完整的页面代码：

<!DOCTYPE html>
<html lang="zh">
 <head>
  <title>DOM功能扩展</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，目前为止已经解决了兼容性问题，这是所有浏览器都能顺利通过的DOM元素扩展的代码，但是这样还有一个小问题，细心的人会发现在IE浏览器里面弹出的结果是"undefined"，而不是"你好"；问题的原因在于IE的事件绑定上，看以上代码，当调用alert(this.innerHTML)的时候，由于IE绑定事件用的是attachEvent，这时候this指向的是windows，于是现在的目标的要改变this指向的对像，将this指向tagA。于是经过修改，完整代码如下：

<!DOCTYPE html>
<html lang="zh">
 <head>
  <title>DOM功能扩展</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);//这里是关键
                });
            }
        }
        DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");
        wrap.bind("click",function(){
            alert(this.innerHTML);
        })
    </script>
 </body>
</html>

javascript 兼容所有浏览器的DOM扩展功能

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQery 渐变图片导航效果代码漂亮

Jan 01 Javascript

js中将HTMLCollection/NodeList/伪数组转换成数组的代码

Jul 31 Javascript

基于jQuery实现文本框缩放以及上下移动功能

Nov 24 Javascript

Angularjs实现多个页面共享数据的方式

Mar 29 Javascript

基于jQuery倒计时插件实现团购秒杀效果

May 13 Javascript

Vue.js每天必学之组件与组件间的通信

Sep 08 Javascript

js 实现一些跨浏览器的事件方法详解及实例

Oct 27 Javascript

jQuery弹出div层过2秒自动消失

Nov 29 Javascript

纯JS焦点图特效实例(可一个页面多用)

Dec 07 Javascript

react-router4 嵌套路由的使用方法

Jul 24 Javascript

Vue验证码60秒倒计时功能简单实例代码

Jun 22 Javascript

Vue解析剪切板图片并实现发送功能

Feb 04 Javascript

别了 JavaScript中的isXX系列

Aug 01 #Javascript

JS判断元素为数字的奇异写法分享

Aug 01 #Javascript

javascript for循环从入门到偏门(效率优化+奇特用法)

Aug 01 #Javascript

jQuery源码中的chunker 正则过滤符分析

Jul 31 #Javascript

关于jquery ajax 调用带参数的webservice返回XML数据一个小细节

Jul 31 #Javascript

基于jquery的点击链接插入链接内容的代码

Jul 31 #Javascript

基于jQuery实现的百度导航li拖放排列效果，即时更新数据库

Jul 31 #Javascript