做 web 应用的人，经常会用到 Javascript 来处理页面上的一些事情。表单验证我们不谈，在根据用户使用情况，显示/隐藏，或者执行一段
js function，的时候，我们需要和页面的 DOM 树打交道。看看 Gmail ，发送邮件，按下“发送”钮后，用 Ajax
在后端发送邮件内容，根据返回的状态，在编辑页面的上方直接显示一小段文字“您的邮件已经发送。”。
通常的思想，我们会在那个发送按钮里面写上：
onclick="javascript:sendmail();"
然后由它来处理。Ajax
返回后，再触发另一个 show_status() 在 id=status 的对象中给出相关的状态信息。复杂的应用的话，源代码里面满目的 html 和 js
混杂。不易维护，也不足够灵活。按理，XHTML 只是用来表示一个表示层的 DOM 树，JS
则对这棵树来做一些操作。交错混杂都谁都不好。
现在有了 addEvent() 和 removeEvent()
。问题就简单了。对一个 dom 对象，给出事件类型，给出所要触发的 function ，这个世界就清静了。你可以随时 remove
掉，换个新的事件处理。如此可以简化很多代码。quirksmode 搞了个比赛，ejohn 拿了第一名，他的实现是所有参与者中最简单明了的一个，在他的 blog
上给出了相关的说明和演示。
addEvent( object, eventType, function
);
addEvent( document.getElementById(‘foo‘), ‘click‘,
doSomething );
addEvent( obj, ‘mouseover‘, function(){
alert(‘hello!‘); }
);
使用之前，先把下面的代码复制过来：
function
addEvent( obj, type, fn ) {
if ( obj.attachEvent )
{
obj[‘e‘+type+fn] =
fn;
obj[type+fn] = function(){obj[‘e‘+type+fn](
window.event );}
obj.attachEvent( ‘on‘+type, obj[type+fn]
);
} else
obj.addEventListener(
type, fn, false );
}
function
removeEvent( obj, type, fn ) {
if ( obj.detachEvent )
{
obj.detachEvent( ‘on‘+type, obj[type+fn]
);
obj[type+fn] = null;
}
else
obj.removeEventListener( type, fn, false
);
}
Javascript属性：addEvent()用法浅析,布布扣,bubuko.com