Javascript屬性：addEvent()用法淺析

做 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 );
}