説明
これに対してDOMでのイベント設定は、イベント処理を複数ストックする（キュー）ようになっています。つまり、複数のクリックイベントを設定しても、以前のイベント設定は消されずに期待通り動作します。このようにするとライブラリなどを利用した場合でも、イベント発生時の不具合を軽減することができます。
イベントを追加するにはaddEventListener()を使います。ただし、Internet Explorerでは利用できないため、attachEvent()で代用します。addEventListener()とattachEvent()の動作は似ていますが、イベント発生時の動作に互換性がないのでイベントバブルアップ（イベントが伝達される処理）などの処理には注意が必要です。
addEventListener()、attachEvent()で設定したイベントを削除するにはremoveEventListener()、detachEvent()を使います。パラメータにはイベントを追加した時のものと同じものを指定します。パラメータが異なると、違うイベント設定とみなされ削除されません。
サンプルコード [実行]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>イベントを設定する／解除する</h1>
<form action="./event.cgi" method="get" name="mainForm">
<input type="button" id="checkButton" value="ボタン"><br>
<input type="button" id="setButton" value="上のボタンにイベントを設定">
<input type="button" id="clrButton" value="上のボタンからイベントを解除">
</form>
</body>
</html>
window.onload = function(){
document.getElementById("setButton").onclick = function(){
myEvent.set();
}
document.getElementById("clrButton").onclick = function(){
myEvent.clear();
}
}
var myEvent = {
set : function(){
var divObj = document.getElementById("checkButton");
if (divObj.addEventListener) divObj.addEventListener("click", myEvent.message, false);
if (divObj.attachEvent) divObj.attachEvent("onclick", myEvent.message);
},
clear : function(){
var divObj = document.getElementById("checkButton");
if (divObj.removeEventListener) divObj.removeEventListener("click", myEvent.message, false);
if (divObj.detachEvent) divObj.detachEvent("onclick", myEvent.message);
},
message : function(){
alert("クリックされました");
}
}