イベント処理

イベントハンドラとは

  • イベントハンドラとは、JavaScriptで記述された、マウスの動きといった動作・操作に対して特定の処理を与えるための命令のことである。
  • リンクの上にマウスポインタが乗った、またはボタンがクリックされた、テキストボックスの内容が変更された、フォームの内容が送信されようとする、など、ユーザーが行う様々な操作に対して特定の処理を行わせる。
  • イベントの発生源となるボタンやリンクは、オブジェクトと呼ばれる。
  • イベントハンドラは、そのオブジェクトに対応するタグのイベント属性の値として記述される。(イベント属性とは、イベントの種類を表す属性のことである)。例えばクリックイベントの場合は、<INPUT TYPE="button">、<A>などの、タグのonClick属性の値としてイベントハンドラが記述される。

イベントハンドラとは (event handler): - IT用語辞典バイナリ

主なイベントハンドラ

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

イベントハンドラの記述方法

HTMLに記述する
<タグ イベントハンドラ = '実行する命令'>
<input type="button" value="start" onClick="startWatch()">
オブジェクトのプロパティとして設定する
オブジェクト名.イベントハンドラ=呼出す関数名;
document.form.btn.onClick = startWatch

イベンドハンドラの使用例

関数を記述する
<script>
var count = 0;
function clickCheck() {
    ++count;
    alert ('クリック回数:' + count);
}
</script>
フォームにイベントハンドラを記述する
<form>
<p>
<input type="button" value="クリック" onClick="clickCheck()">
</p>
</form>
onLoad onclick
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTf-8">
<title>イベントハンドラのテスト</title>
<script>
function init() {
  alert('ドキュメントがロードされました');
}
window.onload = init;

function func1(str) {
  alert(str + 'がクリックされました');
}
</script>
</head>
<body>
<button onclick="func1('ボタン1')">ボタン1</button>
</body>
</html>

記述上の注意 大文字小文字について

  • イベントハンドラは「script」内に記述する場合は、「イベント名はすべて小文字で記述する」
  • タグ内で属性として記述する場合は大文字/小文字を区別しない(つまり、属性として「onClick」と記述する場合のみ、大文字が使用される)
  • わかりやすさよりも、エラーのない記述のために「イベント名はすべて小文字で記述する」と決めておくと良い。