後付けでイベントを定義する

説明

HTML文書内に定義されたボタン等にイベントを設定するには、あらかじめ設定したいタグにID名を指定しておきます（prototype.jsやjQueryなどのライブラリを利用すればID名を指定しなくても設定することができます）。DOM (Document Object Model) に準拠したブラウザの場合はaddEventListener()を使ってイベントを追加します。イベント名はon〜が付かない状態でのものになります。例えばonmouseoverであればmouseoverと指定します。
　Internet Explorerの場合はaddEventListener()が使えないのでattachEvent()を使ってイベントを追加することができます。これらのメソッドではなくオブジェクトにイベントハンドラを指定する形でもイベントを設定することができます。例えば本書ではページの読み込みが完了した場合にwindow.onload=function(){〜}として設定することができます。ただし、他の場所で同様のコードを記述した場合、後から指定したものが有効になり、以前のものは上書きされ消えてしまいます。これを防ぐためにはaddEventListener()、attachEvent()を使います。これらのメソッドでは以前に設定された処理は消されずに追加される形になります。共同作業や複数のライブラリやプログラムを利用する場合にはaddEventListener()、attachEvent()を利用する方が安全です。
　addEventListener()、attachEvent()で設定したイベントはremoveEventListener()、detachEvent()を使って指定したイベントのみ削除することができます。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!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="./setevent.cgi" method="get" name="mainForm">
<input type="button" id="checkButton1" value="ボタン1">
<input type="button" id="checkButton2" value="ボタン2">
</form>
<div id="result">結果：</div>
</body>
</html>
if (window.addEventListener) {
window.addEventListener("load", setEvent1, false);
window.addEventListener("load", setEvent2, false);
}
if (window.attachEvent) {
window.attachEvent("onload", setEvent1);
window.attachEvent("onload", setEvent2);
}
function setEvent1(){
document.getElementById("checkButton1").onclick = function(){
document.getElementById("result").innerHTML += "イベント発生(ボタン1)<br>";
}
}
function setEvent2(){
document.getElementById("checkButton2").onclick = function(){
document.getElementById("result").innerHTML += "イベント発生(ボタン2)<br>";
}
}