Webブラウザのオブジェクト

JavaScript

イベント駆動型プログラミング

イベントとは「ボタンがクリックされた」などのユーザーの操作に応じて発生する信号のようなもの。
このようなイベントに対して任意のJavaScriptを実行できる。
これはGUIを伴うアプリケーションでは一般的な手法でイベント駆動型プログラミングモデルと呼ばれている。
JavaScriptでイベント処理には2つの方法がある。

HTMLタグのイベントハンドラ属性を利用する

イベント処理をscript要素や外部ファイルに関数として定義しておき
イベントハンドラ属性には関数を呼び出すコードを記述する。

<script type="text/javascript">
function showDialog(){
	alert('ボタンがクリックされました');
}
</script>
<input type="button" value="クリック" onclick="showDialog()"/>
JavaScriptによるイベントリスナの登録

HTMLタグはHTMLタグのイベントハンドラ属性に対応したプロパティをもっていて
このプロパティに関数を設定することでイベントに対しての処理を行なえる。
この関数のことをイベントリスナとよぶ。

<!-- id="button1"の要素のonclickプロパティにダイアログを表示する -->
<input type="button" value="クリック" id="button1">
<script type="text/javascript">
//クリック時に呼び出される関数
function showDialog(){
	alert('hello');
}
//document.getElementById()は引数で指定したid属性を持つ要素を取得する
//onclickイベントにイベントリスナを登録
var button=document.getElementById('button1')
button.onclick=showDialog;
</script>
イベントリスナを登録するタイミング

イベントリスナを登録するJavaScriptコードが実行される時点ではまだHTMLの解釈がすんでいない。
そのため存在しない要素に対してイベントリスナを登録することになりエラーが発生する。
これはイベントリスナを登録する要素よりも後にJavaScriptを記述することで回避できる。
外部ファイルにJavaScriptをまとめる場合などは、Windowオブジェクトのonloadイベントハンドラを使ってイベントリスナを登録する。

window.onload=function(){
    document.getElementById('button').onclick=listener;
}
HTMLタグのイベントハンドラ属性
属性名 呼び出されるタイミング
onclick クリックされたとき
ondbclick ダブルクリックされたとき
onmousedown マウスのボタンがクリックされたとき
onmouseup マウスのボタンを離したとき
onmouseover マウスが要素上に移動したとき
onmouseout マウスが要素上から外れたとき
onmousemove マウスが要素内で移動したとき
onchange フォーム内の要素について値が変更されたとき
onblur フォーム内の要素についてフォーカスが外れたとき
onfocus フォーム内の要素についてフォーカスが当たったとき
onkeydown キーを押したとき
onkeypress キーを押して離したとき
onkeyup キーを離したとき
onselect テキストフィールドやテキストエリアでテキストが選択されたとき
onsubmit フォームが送信される前
onreset フォームがリセットされる前
onload webページがロードされるとき
onunload webページがアンロードされるとき