今天周五，很闲，坐在电脑前没什么事可做，产品线的人也没提什么新的需求，可能下周会有新的需求和工作安排，但那是下周的事了。今天就想写点技术的东西，也就当作是记记笔记，本人水平有限，希望大家多多指教，嘴下留情，哈哈。
有时候我们会想扩展DOM元素的功能，可以添加一些自定义的方法，以让它用起来更加灵活、方便；先来举个例子：
复制代码 代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<title>DOM功能扩展</title>
</head>
<body>
<a href="javascript:void(0)">你好</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)">你好</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)">你好</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)">你好</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和其他浏览器的事件绑定方式不一样，实现兼容所有浏览器的事件绑定的代码如下：
复制代码 代码如下: