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 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
js 实现ajax发送步骤过程详解
Jul 25 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
You might like
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
六行python代码的爱心曲线详解
2019/05/17 Python
Django Rest framework频率原理与限制
2019/07/26 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
西门豹教学反思
2014/02/04 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
故宫导游词
2015/01/31 职场文书
2015年宣传工作总结
2015/04/08 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
海上钢琴师观后感
2015/06/03 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers