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)">你好</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)">你好</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元素好像就是以上这些方法了～不知道还有没有其他）
重写后，再进行一些处理变换就可以得到以下完整的页面代码：
复制代码 代码如下: