イベント処理

イベントとは

  • 何らかの状態が起こったときに生まれるメッセージのようなもの
  • JavaScriptに用意されている「イベントハンドラ」という仕組みを使うと、このイベントを捕まえて適切な処理を行うことができます
イベントハンドラ

JavaScriptに限らず、ActionScriptなどGUIプログラミングでは、重要な役割をするのが「イベント」の扱いです。

イベントハンドラの基礎

HTMLに記述する
  • HTMLタグの属性として記述する


< タグ　イベントハンドラ = " 実行する命令 " >

<input type="button" value="start" onClick="startWatch()">
プログラムとして設定する
  • オブジェクトのプロパティとして設定する


<オブジェクト.イベントハンドラ = 関数 >

document.form.btn.onClick = startWatch

イベントハンドラを使う

関数を記述する
<script>
<!--
var count = 0;
function clickCheck() {
	++count;
	alert ('クリック回数：' + count);
}
//-->
</script>
  • 関数内部に変数「count = 0」を入れてしまうと、内部だけで有効な「ローカル変数」になってしまい、関数が呼び出されるたびに初期化され、ダイアログには毎回「１」を表示してしまう
フォームにイベントハンドラを記述する
<form>
<p>
<input type="button" value="クリック" onClick="clickCheck()">
</p>
</form>
イベントハンドラをプログラムで設定する


フォームに名前をつける

<form name="form1">
<p>
<input name="btn1" type="button" value="クリック">
</p>
</form>


onClick関数を記述する

<body>
<form name="form1">
<p>
<input name="btn1" type="button" value="クリック">
</p>
</form>
<script>
<!--
document.form1.btn1.onclick = clickCheck;

var count = 0;
function clickCheck() {
	++count;
	alert ('クリック回数：' + count);
}
//-->
</script>
</body>

もし、body内ではなくhead要素の中に「script」が記述されている場合は、エラーが発生します。



「document.form1」が定義されていないとうエラーです。


ActionScriptでおなじみの「匿名関数（無名関数）」で定義してみます。

<script>
<!--
window.onload = function() {
  document.form1.btn1.onclick = clickCheck;
}

var count = 0;
function clickCheck() {
	++count;
	alert ('クリック回数：' + count);
}
//-->
</script>


これでエラーがなくなりました。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントハンドラのテスト</title>
<script>
function func1(str) {
  alert(str + 'platformがクリックされました');
}

function init() {
  alert('ドキュメントがロードされました');
}
window.onload = init;
</script>
</head>
<body>
<form id="myForm" name="myForm">
<p>
<input type="button" value="ボタン1" name="button1" onclick="func1('ボタン1');">
</p>
</form>
</body>
</html>

注意

  • イベントハンドラは「script」内に記述する場合は、「イベント名はすべて小文字で記述する」
  • タグ内で属性として記述する場合は大文字/小文字を区別しません（つまり、属性として「onClick」と記述する場合のみ、大文字が使用されます）
  • 以下の表のような記述をそのまま、「script」内に記述することはできません（メソッド名がキャメルケースの記述にするものがあることから採用された、意味を理解しやすいための記述です）


わかりやすさよりも、エラーのない記述のためには「イベント名はすべて小文字で記述する」と決めておくと良いでしょう。


《主なイベントハンドラ一覧》
イベント
ハンドラ		説明
onBlurページやフォーム要素からフォーカスが外れた時に発生
onFocusページやフォーム要素にフォーカスが当たった時に発生
onChangeフォーム要素の選択、入力内容が変更された時に発生
onSelectテキストが選択された時に発生
onSubmitフォームを送信しようとした時に発生
onResetフォームがリセットされた時に発生
onAbort画像の読み込みを中断した時に発生
onError画像の読み込み中にエラーが発生した時に発生
onLoadページや画像の読み込みが完了した時に発生
onUnloadウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新）した時に発生
onClick要素やリンクをクリックした時に発生
onDblClick要素をダブルクリックした時に発生
onKeyUp押していたキーをあげた時に発生
onKeyDownキーを押した時に発生
onKeyPressキーを押してる時に発生
onMouseOutマウスが離れたした時に発生
onMouseOverマウス乗った時に発生
onMouseUpクリックしたマウスを上げた時に発生
onMouseDownマウスでクリックした時に発生
onMouseMoveマウスを動かしている時に発生

イベントハンドラの記述方法
  • HTML要素内でイベントハンドラを設定する（2013年時点では、外部に記述するよう推奨されています。）
  • ダブルクォート内の記述はシングルクォートにする


<html要素　イベントハンドラ = '実行するステートメント'>

  1. クリックされると
  2. func1関数を呼び出す
  3. ダイアログボックスを表示する


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

  • イベントハンドラは、オブジェクトのプロパティとして設定することもできます
  • イベントハンドラ名は、すべて小文字で記述します
  • 関数名の後ろに「( )」を記述することはできません
  • 関数をオブジェクトとして扱うためです


オブジェクト名 . イベントハンドラ = 呼び出す関数名;

  1. HTMLドキュメントが読み込が完了すると（onload）
  2. init関数を呼び出す
  3. ダイアログボックスを表示する

まとめ