JavaScriptのイベント処理　イベントハンドラ

JavaScriptはイベントドリブンモデルのプログラムです。
それは、あるイベント（ページロード、マウスクリック、テキストボックスの内容が変更されたなど）に応じて実行するコードを記述することです。

DOMレベル０のイベントモデル

JavaScript初期の頃のイベントハンドラの設定方法です。

イベントタイプ

イベントとイベントハンドラの関連付け

JavaScriptでのイベントとイベントハンドラの関連付けのポイントは次のようになります。

• イベントを発生する要素
• イベントの種類
• イベントで実行する命令
• イベントの関連付け

HTMLの属性を利用した方法

イベント属性とは、スクリプトを利用する際に、ユーザの反応に対して動作する属性のことです。これをイベントハンドラとして使用することです。

簡単な例　アラートの表示
ボタンをクリックしたらアラートが表示されます。
サンプル

<script>
function btn_click(){
	window.alert('クリックした！');
}
</script>

<input type="button" value="alert" onclick="btn_click()">

この例はonclickイベントハンドラとbtn_click()関数を関連付けしてアラートを表示させています。
そしてこの記述はinput要素の属性としてonclickを記述しています。
つまりイベントハンドラ属性の値としてalert表示の命令をする関数の記述をしているわけです。

イベントハンドラ属性の記述は大文字でも小文字でもHTMLの規則に従うので可能ですが、onClickなどとする場合が多かったです。けれどもxhtmlが一般的になるとxhtmlの規則に従い全て小文字が使用されるようになっています。

イベントハンドラ属性を使用する場合はmeta要素に次の記述を入れておきましょう。

<meta http-equiv="Content-Script-Type" content="text/javascript" />

プロパティとしてイベントハンドラを設定

イベントハンドラのみとはいえ、JavaScriptをbodyの中に書くのは好ましくありません。
そこでDOM0を利用します。
documentオブジェクトを指定してそのプロパティを設定します。
注意点としてJavaScriptはHTMLが全て読み込まれてから実行されなければなりません。
最近よく使用される方法としてbodyタグの終了タグの直前に記述する方法など使用します。
もちろんonloadを使用することもOKです。
プロパティとしてイベントハンドラを設定する場合はすべて小文字で記述しなければなりません。なぜならこれはHTMLの属性ではないからです。

<form name="f1">
  <input name="mybutton" type="button" value="alert">
</form>
<script>
document.f1.mybutton.onclick=function(){
	alert('クリックした！');
}
</script>