in
JavaScript
- 26 12月, 2013
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アプリケーション開発にとって重要な要素です。
今後、さらに他のイベントハンドラも勉強していきたいと思います。