Webブラウザのオブジェクト　　　Prev. Page　　Next Page

イベントハンドラ属性とは、「onイベント名」という名称の属性で、イベントの種類に応じて以下の表のようなものがあります。
表１

onclick	クリックされたとき
ondclick	ダブルクリックされたとき
onmousedown	マウスボタンがクリックされたとき
onmouseup	マウスボタンがを放したとき
onmouseover	マウスが要素上に移動したとき
onmouseout	マウスが要素上から放れたとき
onchange	フォーム内の要素について値が変更されたとき
onblur	フォーム内の要素についてフォーカスが外れたとき
onfocus	フォーム内の要素についてフォーカスが当たったとき
onkeydown	キーを押したときとき
onkeypress	キーを押して放したとき
onkeyup	キーを放したとき
onselect	テキストフォールドやテキストエリアでテキストが選択されたとき
onsubmit	フォームが送信される前。属性値に記述したJavaScriptがtrueを返す場合はフォームが送信され、falseを返す場合はフォームが送信されない
onreset	フォームがリセットされる前。属性値に記述したJavaScriptがtrueを返す場合はリセットされ、falseを返す場合はフォームがリセットされない
onload	Webページがロードされたとき
onunload	Webページがアンロードされるとき

HTMLの各要素は表１で示したHTMLタグのイベントハンドラ属性に対応したプロパティを持っており、このプロパティに関数を設定するこができます。この関数のことを「イベントリスナ」と呼びます（イベントリスナといっても普通のJavaScript関数です）。
以下のコードはイベントリスナを登録する例です。

// クリック時に呼び出される関数

function hello(){ 

 alert('Hello'); 

} 


// onclick イベントにイベントリスナを登録

var button = document.getElementById('button');

button.onclock = hello;

このサンプルでは「id属性=button」の要素のonclickプロパティにダイアログを表示する関数を設定しています。document.getElementById()は引数で指定したid属性を持つ要素を取得します。
上記の方法を用いることで、HTMLとJavaScriptを完全に分離できます。また、JavaScriptから動的にイベントリスナを設定/削除を行ったり、イベントリスナを複数の要素に一括登録したりといったことも容易に行えます。

イベントリスナを登録するJavaScriptコードは登録する要素よりも後に記述しなければなりません。しかしながら、外部ファイルにJavaScriptをまとめる場合など、必ずしも要素の後にJavaScriptを記述できるとは限りません。そのため、通常のイベントリスナを登録するコードは以下のようにWindowオブジェクト（変数Window）のonloadイベントハンドラを使ってイベントリスナを登録します。onloadイベントはHTMLページの読込みが完了したタイミングで発生するため、イベントリスナを登録する際にHTMLの全ての解析が終わっていることが保証されます。

window.onload = function() { 

  document.getElementById('button').onclick = listener; 

}

ダイアログ表示をするメソッドには次の３つがあります。
alert()メソッドは警告ダイアログを表示します。
例

  ; 

 onclick="alert('こんにちは、' + documnet.form.name.value + 'さん \n' + 'お元気ですか？')" ; 

confirm()メソッドは確認用のダイアログを表示します。[OK]が選択された場合は戻り値がtrue,[キャンセル]が選択された場合は戻り値がfalseになります。
prompt()メソッドはユーザーからの入力値を取得するためのタイアログを表示します。第１引数には「ダイアログに表示するメッセージ」、第２引数には「初期値」を設定します。空の入力ダイアログを表示するには第２引数に空文字(")を指定します。