<script type="text/javascript">
<!--
// クリックイベント追加
function addClickEvent() {
    o = document.getElementById("hoge");
    if (o.addEventListener) {
        // IE以外
        o.addEventListener("click", alertHoge, false);
    } else {
        // IE
        o.attachEvent("onclick", alertHoge);
    }
    document.getElementById("hage1").disabled = true;
    document.getElementById("hage2").disabled = false;
}
// クリックイベント消去
function removeClickEvent() {
    o = document.getElementById("hoge");
    if (o.removeEventListener) {
        // IE以外
        o.removeEventListener("click", alertHoge, false);
    } else {
        // IE
        o.detachEvent("onclick", alertHoge);
    }
    document.getElementById("hage1").disabled = false;
    document.getElementById("hage2").disabled = true;
}
// アラート
function alertHoge() {
    alert("hogeほげ");
}
//-->
</script>
<input type="button" id="hage1" value="クリックイベントを追加" onClick="addClickEvent()">
<input type="button" id="hage2" value="クリックイベントを消去" onClick="removeClickEvent()" disabled><br>
<br>
<div id="hoge" style="width:200;height:100;background-color:#eeeeee;"></div>

これを実際にセットしてみました。
ボタンをクリックする前後で、グレー部分をクリックした時の反応を見てみてください。



以下のような反応になることが確認できたかと思います。

・クリックイベントを追加ボタンを押す前
　-クリックしても何もおきない。
・クリックイベントを追加ボタンを押した後
　-クリックすると、alert表示。
・クリックイベントを消去ボタンを押した後
　-クリックしても何もおきない。

このサンプルでは、addEventListener、removeEventListener、attachEvent、detachEvent の4つを使い、クリックイベントのイベントハンドラを操作しています。

addEventListener または attachEvent でイベントハンドラの追加、
removeEventListener または detachEvent でイベントハンドラの消去を行っています。
書式はほぼ同じで、第一引数にはイベントの種類（addEventListener と attachEvent で若干記述が異なります）を、第二引数にはイベント発生時に実行させたい関数を指定します。

attachEvent と detachEvent は InternetExplorer 用。
addEventListener と removeEventListener はそれ以外用です。

なお、上記サンプルは、Winでは InternetExplorer(Ver6以上) と Firefox 。Macでは Safari と Firefox で動作確認済です。

これを使えば色々と面白いものが作れそうですね。
‥‥まぁ、何を作るかはその人次第ですが。

以上、偏ったDOMネタでした。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ