富贵资源网

javascript 兼容所有浏览器的DOM扩展功能
站长资源 2024/11/16 佚名
47 1538
富贵资源网 Design By www.hznty.com
今天周五，很闲，坐在电脑前没什么事可做，产品线的人也没提什么新的需求，可能下周会有新的需求和工作安排，但那是下周的事了。今天就想写点技术的东西，也就当作是记记笔记，本人水平有限，希望大家多多指教，嘴下留情，哈哈。
　　有时候我们会想扩展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>
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
富贵资源网 Design By www.hznty.com