ywork2020.com

Title

要素にハンドラーをアタッチする

目次 (INDEX)

Event Handlerとは

ここで説明する Event Handler とは属性リスナーのことでもあります。
以下、関連用語です。
event
読み: イベント
意味: 出来事、行事
handler
読み: ハンドラー
意味: 扱い手、調教師
listener
読み: リスナー
意味: 聞き手、聴取者
bind
読み: バインド
意味: 紐づける、結びつける、関連付ける
attach
読み: アタッチ
意味: 接続、取り付ける

目次に戻る

Event Handler属性の概要

まず、はじめに申し上げておくことがあります。 この Event Handler 属性という言葉は、ここで説明している属性の総称としては適切でないかもしれません。

ハンドラーというと本来はアタッチされる関数のことを指す言葉なので、 筆者自身は、これらの属性のことを 「 属性リスナー 」 と呼んでいます。

では、なぜ、イベントハンドラー属性と書いたのかというと、初学者にとって直感的に分かりやすそうと思ったからです。 筆者には、このページをスタートとしてイベントと関数についての学習が広がっていけば良いなと思っております。

それでは、本題に入ります。
ここで言っている Event Handler 属性とは実際にはありません。 これは 要素でイベントが発生した時に実行されるハンドラーをアタッチするための属性の総称として、こう呼んでみました。 ここから先は、Event Handler 属性のことを 「 属性リスナー 」 と呼んでいきます。

属性リスナーには具体的にどのようなものがあるでしょうか。 このページの後半部分には一覧表をを設けて紹介していますが、 動作のサンプルとして以下の 2 つの属性リスナーを使って動きの確認をしようと思います。

  • onclick (オンクリック)
  • onchange (オンチェンジ)

目次に戻る

サンプルコードと実行結果

ここでは、 select 要素にチェンジイベントをバインドします。 また、 button 要素にはクリックイベントをバインドします。

各イベントには属性リスナーを使い、 ハンドラーとして自作の function ( 関数 ) をアタッチします。

サンプルコード: HTML
<body>
	<div>
		<select onchange="evtChange(this.value)">
			<option value="リスト1"> リスト1 </option>
			<option value="リスト2"> リスト2 </option>
			<option value="リスト3"> リスト3 </option>
		</select>
	</div>
	<div>
		<output id="idOutput"> innerText </output>
	</div>
	<div>
		<button onclick="evtClick(idOutput.innerText)"> クリック </button>
	</div>
</body>
  • 03-07: select onchange="evtChange(this.value)" (select 要素です。onchange 属性には要素の内容に変更があった時に実行されるハンドラーを指定します。 この場合のハンドラーは evtChange() という関数のことを表しています。 関数の引数になっている this.value とはこの要素の内容の値を指しています。この引数は関数の receiveValue に値を渡します。)
  • 10: output id="idOutput" (output 要素です。これはプログラムによって値を出力するための要素です。 この要素には識別子として idOutput という id を与えています。)
  • 13: button onclick="evtClick()" (button 要素です。onclick 属性には要素をクリックした時に実行されるハンドラーを指定します。 この場合のハンドラーは evtClick() という関数のことを表しています。 関数の引数になっている idOutput.innerText とは idOutput の識別子を持つ要素の コンテンツテキストの値を指しています。この引数は関数の receiveText に値を渡します。)
サンプルコード: script
<script>
	function evtChange(receiveValue){
		idOutput.innerHTML = receiveValue;
	}
	function evtClick(receiveText){
		window.alert(receiveText);
	}
</script>
  • 02-04: function evtChange(receiveValue){ 実行処理 } (evtChange() という関数を作成しています。 この関数は select 要素の内容に変更があった時に呼び出されます。)
  • 03: idOutput.innerHTML = receiveValue (idOutput の識別子を持つ要素のコンテンツテキストに receiveValue の値を代入しています。)
  • 05-07: function evtClick(receiveText){ 実行処理 } (evtClick() という関数を作成しています。 この関数は button 要素がクリックされた時に呼び出されます。)
  • 06: window.alert(receiveText) (alert ダイアログを開きます。ダイアログに表示されるのは receiveText の値です。)
実行結果:
リスト:
出力: id="idOutput"
innerText
ボタン:

目次に戻る

使用できる属性

目次に戻る

参考: 「 属性リスナー 」 の一覧表

ここでは、要素の属性リスナーを使ってバインドできるイベントを表形式で掲載しておきます。 ただし、昨今ではモバイルのブラウザ向けに新しいリスナーも追加されているので、これが全てではないということだけはご理解ください。

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

目次に戻る