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

开发 前端
技术文章写得少,所以有时候想写点什么却下不了手,不知道该写什么;往往到了准备要写的时候才发现自己想写的东西其实很无聊,甚至觉得很幼稚,于是又关掉了编缉器,呵呵。

技术文章写得少,所以有时候想写点什么却下不了手,不知道该写什么;往往到了准备要写的时候才发现自己想写的东西其实很无聊,甚至觉得很幼稚,于是又关掉了编缉器,呵呵。

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

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

  1. <!DOCTYPE html> 
  2. <html lang="zh"> 
  3.  <head> 
  4.   <title>DOM功能扩展</title> 
  5.  </head> 
  6.  <body> 
  7.     <a href="javascript:void(0)" id="tagA">你好</a> 
  8.     <script type="text/javascript"> 
  9.     <!--  
  10.         var tagA=document.getElementById("tagA");  
  11.         tagA.onclick=function(){  
  12.             alert(this.innerHTML);  
  13.         }  
  14.     //--> 
  15.     </script> 
  16.  </body> 
  17. </html> 

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

  1. <!DOCTYPE html> 
  2. <html lang="zh"> 
  3.  <head> 
  4.   <title>DOM功能扩展</title> 
  5.  </head> 
  6.  <body> 
  7.     <a href="javascript:void(0)" id="tagA">你好</a> 
  8.     <script type="text/javascript"> 
  9.     <!--  
  10.         var tagA=document.getElementById("tagA");  
  11.         tagA.bind("click",function(){  
  12.             alert(this.innerHTML);  
  13.         })  
  14.     //--> 
  15.     </script> 
  16.  </body> 
  17. </html> 

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

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

  1. <!DOCTYPE html> 
  2. <html lang="zh"> 
  3.  <head> 
  4.   <title>DOM功能扩展</title> 
  5.  </head> 
  6.  <body> 
  7.     <a href="javascript:void(0)" id="tagA">你好</a> 
  8.     <script type="text/javascript"> 
  9.     <!--  
  10.     HTMLElement.prototype.Alert=function(){  
  11.         alert("这是一个扩展方法");  
  12.     }  
  13.     var tagA=document.getElementById("tagA");  
  14.     tagA.Alert();  
  15.     //--> 
  16.     </script> 
  17.  </body> 
  18. </html> 

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

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

  1. <!DOCTYPE html> 
  2. <html lang="zh"> 
  3.  <head> 
  4.   <title>DOM功能扩展</title> 
  5.  </head> 
  6.  <body> 
  7.     <a href="javascript:void(0)" id="tagA">你好</a> 
  8.     <script type="text/javascript"> 
  9.     <!--  
  10.         function DOMExtend(name,fn){  
  11.             eval("HTMLElement.prototype."+name+"="+fn);//这里我们采用动态扩展  
  12.         }  
  13.         function Alert(){  
  14.             alert("这是一个扩展方法");  
  15.         }  
  16.         DOMExtend("Alert",Alert);  
  17.  
  18.         var tagA=document.getElementById("tagA");  
  19.         tagA.Alert();  
  20.     //--> 
  21.     </script> 
  22.  </body> 
  23. </html> 

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

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

  1. function BindEvent(elem,event,fun){  
  2.     if(elem.addEventListener){  
  3.         elem.addEventListener(event,fun,false);  
  4.     }  
  5.     else{  
  6.         elem.attachEvent("on"+event,fun);  
  7.     }  

以下是事件绑定的使用例子:

  1. <!DOCTYPE html> 
  2. <html lang="zh"> 
  3.  <head> 
  4.   <title>DOM功能扩展</title> 
  5.  </head> 
  6.  <body> 
  7.     <a href="javascript:void(0)" id="tagA">你好</a> 
  8.     <script type="text/javascript"> 
  9.     <!--  
  10.         function BindEvent(elem,event,fun){  
  11.             if(elem.addEventListener){  
  12.                 elem.addEventListener(event,fun,false);  
  13.             }  
  14.             else{  
  15.                 elem.attachEvent("on"+event,fun);  
  16.             }  
  17.         }  
  18.         var tagA=document.getElementById("tagA");  
  19.         function Alert(){  
  20.             alert("这是事件绑定");  
  21.         }  
  22.         BindEvent(tagA,"click",Alert);  
  23.     //--> 
  24.     </script> 
  25.  </body> 
  26. </html> 

以上代码运行后,点击“你好”就会弹出“这是事件绑定”,这里值得一提的就是addEvenListener的第三个参数,这里的值是false,意思是取消Capture方式而采用冒泡方式。标准的事件有两种触发方式,一种是捕获型(caputre),另一种是冒泡型;而IE只支持冒泡型。捕获型的特点是触发方式是从外到内的方式触发事件,而冒泡型就是从内到外的方式触发事件,假设以上代码的A元素外层包了一个DIV元素,如果A元素与它的父元素DIV都有一个onclick事件,那么冒泡型就是点击A的时候会先触发A的事件,然后再触发DIV的事件,反之就是捕获型。

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

  1. <!DOCTYPE html> 
  2. <html lang="zh"> 
  3.  <head> 
  4.   <title>DOM功能扩展</title> 
  5.  </head> 
  6.  <body> 
  7.     <a href="javascript:void(0)" id="tagA">你好</a> 
  8.     <script type="text/javascript"> 
  9.     <!--  
  10.         function DOMExtend(name,fn){  
  11.             eval("HTMLElement.prototype."+name+"="+fn);//这里我们采用动态扩展  
  12.         }  
  13.  
  14.         function BindEvent(event,fun){  
  15.             if(this.addEventListener){//执行完DOMExtend后,这里的this会指向HTMLElement  
  16.                 this.addEventListener(event,fun,false);//标准的事件绑定  
  17.             }  
  18.             else{  
  19.                 this.attachEvent("on"+event,fun);//IE的事件绑定  
  20.             }  
  21.         }  
  22.  
  23.         DOMExtend("bind",BindEvent);//执行功能扩展  
  24.  
  25.         var tagA=document.getElementById("tagA");  
  26.           
  27.         tagA.bind("click",function(){//这就是我们最终要实现的功能  
  28.             alert(this.innerHTML);  
  29.         })  
  30.  
  31.     //--> 
  32.     </script> 
  33.  </body> 
  34. </html> 

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

document.getElementById

document.getElementsByTagName

document.createElement

document.documentElement

document.body

(PS:记忆中获取DOM元素好像就是以上这些方法了~不知道还有没有其他)

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

  1. <!DOCTYPE html> 
  2. <html lang="zh"> 
  3.  <head> 
  4.   <title>DOM功能扩展</title> 
  5.  </head> 
  6.  
  7.  <body> 
  8.     <a href="javascript:void(0)" id="tagA">你好</a> 
  9.     <script type="text/javascript"> 
  10.         function DOMExtend(name, fn){  
  11.             if(typeof(HTMLElement)!="undefined"){  
  12.                 eval("HTMLElement.prototype."+name+"="+fn);  
  13.             }  
  14.             else{  
  15.                 var _getElementById=document.getElementById;  
  16.                 document.getElementById=function(id){  
  17.                     var _elem=_getElementById(id);  
  18.                     eval("_elem."+name+"="+fn);  
  19.                     return _elem;  
  20.                 }  
  21.  
  22.                 var _getElementByTagName=document.getElementsByTagName;  
  23.                 document.getElementsByTagName=function(tag){  
  24.                     var _elem=_getElementByTagName(tag);  
  25.                     var len=_elem.length;  
  26.                     for(var i=0;i<len;i++){  
  27.                         eval("_elem["+i+"]."+name+"="+fn);  
  28.                     }  
  29.                     return _elem;  
  30.                 }  
  31.  
  32.                 var _createElement=document.createElement;  
  33.                 document.createElement=function(tag){  
  34.                     var _elem=_createElement(tag);  
  35.                     eval("_elem."+name+"="+fn);  
  36.                     return _elem;  
  37.                 }  
  38.  
  39.                 var _documentElement=document.documentElement;  
  40.                 eval("_documentElement."+name+"="+fn);  
  41.  
  42.                 var _documentBody=document.body;  
  43.                 eval("_documentBody."+name+"="+fn);  
  44.             }  
  45.         }  
  46.  
  47.         function BindEvent(event,fun){  
  48.             if(this.addEventListener){  
  49.                 this.addEventListener(event,fun,false);  
  50.             }  
  51.             else{  
  52.                 this.attachEvent("on"+event,fun);  
  53.             }  
  54.         }  
  55.  
  56.         DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");  
  57.  
  58.         wrap.bind("click",function(){  
  59.             alert(this.innerHTML);  
  60.         })  
  61.     </script> 
  62.  </body> 
  63. </html> 

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

  1. <!DOCTYPE html> 
  2. <html lang="zh"> 
  3.  <head> 
  4.   <title>DOM功能扩展</title> 
  5.  </head> 
  6.  
  7.  <body> 
  8.     <a href="javascript:void(0)" id="tagA">你好</a> 
  9.     <script type="text/javascript"> 
  10.         function DOMExtend(name, fn){  
  11.             if(typeof(HTMLElement)!="undefined"){  
  12.                 eval("HTMLElement.prototype."+name+"="+fn);  
  13.             }  
  14.             else{  
  15.                 var _getElementById=document.getElementById;  
  16.                 document.getElementById=function(id){  
  17.                     var _elem=_getElementById(id);  
  18.                     eval("_elem."+name+"="+fn);  
  19.                     return _elem;  
  20.                 }  
  21.  
  22.                 var _getElementByTagName=document.getElementsByTagName;  
  23.                 document.getElementsByTagName=function(tag){  
  24.                     var _elem=_getElementByTagName(tag);  
  25.                     var len=_elem.length;  
  26.                     for(var i=0;i<len;i++){  
  27.                         eval("_elem["+i+"]."+name+"="+fn);  
  28.                     }  
  29.                     return _elem;  
  30.                 }  
  31.  
  32.                 var _createElement=document.createElement;  
  33.                 document.createElement=function(tag){  
  34.                     var _elem=_createElement(tag);  
  35.                     eval("_elem."+name+"="+fn);  
  36.                     return _elem;  
  37.                 }  
  38.  
  39.                 var _documentElement=document.documentElement;  
  40.                 eval("_documentElement."+name+"="+fn);  
  41.  
  42.                 var _documentBody=document.body;  
  43.                 eval("_documentBody."+name+"="+fn);  
  44.             }  
  45.         }  
  46.  
  47.         function BindEvent(event,fun){  
  48.             if(this.addEventListener){  
  49.                 this.addEventListener(event,fun,false);  
  50.             }  
  51.             else{  
  52.                 var tag=this;  
  53.                 tag.attachEvent("on"+event,function(){  
  54.                     fun.apply(tag,arguments);//这里是关键  
  55.                 });  
  56.             }  
  57.         }  
  58.  
  59.         DOMExtend("bind",BindEvent);var wrap=document.getElementById("tagA");  
  60.  
  61.         wrap.bind("click",function(){  
  62.             alert(this.innerHTML);  
  63.         })  
  64.     </script> 
  65.  </body> 
  66. </html> 

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

责任编辑:林师授 来源: 博客园
相关推荐

2009-08-18 13:59:21

C#多标签浏览器

2013-03-19 14:16:51

Chrome浏览器

2021-05-17 14:15:16

Edge浏览器Android翻译功能

2015-01-21 15:45:50

斯巴达浏览器

2011-06-28 14:26:05

Opera浏览器

2010-09-15 09:12:03

JavaScript浏览器兼容

2013-11-22 09:58:36

2012-09-07 13:57:24

浏览器Chrome

2021-08-28 06:15:49

浏览器手机浏览器夸克

2022-05-30 07:58:52

浏览器插件

2011-09-15 16:33:25

2021-06-05 07:51:11

ChromeSafariFirefox

2021-09-27 14:39:12

HTTPS Everw浏览器扩展Google

2010-09-15 09:43:24

Javascript浏览器兼容

2011-04-12 16:51:29

Javascript兼容性

2010-08-11 13:35:10

JavaScriptCSS

2010-09-16 11:21:54

FirefoxJS

2022-04-07 09:00:00

跨浏览器测试自动化服务异常

2010-03-25 11:15:56

Google Chro

2015-06-12 10:08:18

QQ浏览器9.0
点赞
收藏

51CTO技术栈公众号