JavaScript入門 その6

前回で関数までを学びましたが、それらはJavaScriptだけに限らず

ほとんどのプログラミング言語が基本としていることです。

今回からはJavaScript特有の技術を学んでいきましょう。

 

今回はイベントハンドラを学んでいきましょう。

まず、イベントとは「ユーザが何か動作をした(クリックした・スクロールした)など状態の変化が起こること」を言います。

じゃあ、イベントハンドラは何かというと「イベントが起こった時に自動で呼ばれる仕組みのこと」を言います。

何を言ってるのかさっぱりわからないので、実際に見てみましょう。

 

ボタンがクリックされた時のイベントとイベントハンドラです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
   //クリックされた時に実行したい関数
	function ClickTEST() {
		document.write("押してくれて感謝");
	}
</script>
</head>
<body>

//onclick:クリックイベントハンドラ
<input type="button" value="押してね" id="button1" onclick="ClickTEST();">

</body>
</html>

これを実行すると画面には「押してね」ボタンが表示されます。

そのボタンをクリックすると「押してくれて感謝」と表示されるプログラムです。

 

ここでいうイベントとは「押してねボタンをクリック」することです。

そしてイベントハンドラは「onclick」のことを言います。

最初にイベントハンドラのことを「イベントが起こった時に自動で呼ばれる仕組みのこと」と言いましたが、

実際に動きを見てみると、ボタンがクリックされた時にいつの間にかoncllickが呼ばれています。

onclickと書くだけでクリック時に指定した処理が実行される、このことをイベントハンドラといいます。

なんとなく実感できたでしょうか。

 

イベントハンドラの記述方法はいくつかあります。

//1.HTMLタグ内に記述
<input type="button" value="押してね" id="button1" onclick="実行したい処理">

//2.オブジェクトのプロパティとして記述
var button = document.getElementById("オブジェクトID");
button.onclick = 実行したい処理;   //関数の場合、後ろの()はいらない

 

今回はクリック時のイベントハンドラしか見ていませんが、このほかにももっと種類があります。

イベントハンドラはwebアプリケーション開発にとって重要な要素です。

今後、さらに他のイベントハンドラも勉強していきたいと思います。