作为一种事件驱动的编程语言，Js的程序很少主动执行，一般都是由一些事件触发，像click，dblclick，keypress，mousemove等事件，然后执行一段脚本。给一个事件指派一个处理函数，一般称做：注册事件处理函数。

??? 比如页面上有一个p元素：
?????? <p id=’lethe’>测试一下</p>
??? 我们用
??????? x = document.getElementById(’lethe’)
??? 得到了这个结点。现在尝试给它添加一个鼠标点击的事件，当鼠标点击的时候，弹出一句话：
?????? “测试成功！”
??? 事件处理函数很简单：function beLessForgetfull(){ alert(”测试成功”) }

??? 很遗憾的是，不同的浏览器添加事件处理函数的方法不太一样。主要有三种：
??? 传统方式，把事件处理函数做为DOM元素的一个属性，像onclick，onmouseover等。现代浏览器一般会兼容这种写法。
?????? x.onclick = beLessForgetfull;
??? 传统方式的缺点是，不能给一个元素的一种事件定义两个事件处理函数，因为后面添加的函数会覆盖前面的。

高级方法：
??? IE系列的：attachEvent(eventType, handler)
?????? x.attachEvent(’onclick’, beLessForgetfull);
??? W3CDOM定义的：addEventListener(eventType, handler, capture)，多了一个capture参数，是boolean类型的。如果是false，表示事件冒泡。如果为true则表示事件捕捉。IE只支持冒泡，所以通常都是false。
?????? x.addEventListener(’click’, beLessForgetfull, false);
??? 优点就是，可以给一个元素一种事件注册多个处理函数。

添加了事件处理函数，如果在不用的时候，自然应该可以移除。
传统方式注册的处理函数，要移除就非常简单了。
??? el.onclick = null;?? // 移除click处理函数。

高级方法注册了的事件处理函数，要用detachEvent或removeEventListener来移除。参数和attachEvent或addEventListener一样。
??? x.detachEvent(’onclick’, beLessForgetfull);
或
??? x.removeEventListener(’click’, beLessForgetfull);
但是如果要移除所有的事件处理函数，因为没有一个方法可以找到所有注册在一个元素上的事件处理函数，所以需要写程序的人自己去记住这些函数，然后一个一个地去除。

IE的attachEvent还有一个问题是，事件处理函数是全局的。就是说，在事件处理函数里，this是等于window的。
要解决这一点并不太难。这是例子：
? 4 function addEventSimple(evt, el, handler){
? 5???? if(el.addEventListener){
? 6???????? el.addEventListener(evt, handler, false);
? 7???? }else if(el.attachEvent){
? 8???????? el.attachEvent(’on’+evt, function(){
? 9???????????? return handler.call(el, window.event);
?10???????? });
?11???? }else{
?12???????? //var oldHandler = el['on'+evt] || function(){};
?13???????? el['on'+evt] = handler;
?14???? }
?15 }
用到了函数对象的call方法，这个方法和apply方法，都是可以指定函数里的this对象的，它们的差别只在于参数传递方式的不一样。
上面的例子的最后的else部分，还没有写完。原先是想让只支持传统方式的浏览器也可以注册多个事件处理函数。

不过，对于这个addEventSimple，如果要再写一个移除事件处理函数的，就是removeEventComplex，如果只是复杂还好，似乎还是不可能的。在jQuery，似乎是用了一个$Event对象在管理所有的事件注册和移除

?

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/evenbing/archive/2008/11/24/3362671.aspx