ProgrammingJavaScript講座第1章 JavaScript言語仕様
第1章 JavaScript言語仕様

インベントハンドラ1

イベントハンドラ概要

ネットスケープ・ナビゲーターやインターネット・エクスプローラーなどのブラウザには、JavaScriptが識別することのできるイベントが用意されています。イベントは、日本語に訳すと"出来事"ですよね。たとえば、ボタンをクリックする、テキストを入力する、というのがイベントです。
JavaScriptはそれらのイベントをとらえて、それに反応するスクリプトを定義できます。その、イベントを定義するのがイベントハンドラです。

イベントハンドラには以下の9種類があります。

  • onBlur
  • onClick
  • onChange
  • onFocus
  • onLoad
  • onMouseOver
  • onSelect
  • onSubmit
  • onUnload

HTMLに表示するボタンは次のようにフォームの<input>タグのtypeオプションにbuttonと指定すれば作成できます。
formタグについては、「初心者もOKのHTML入門」を参照してください。

<form>
<input type="button" value="ボタン" onclick="Button()">
</form>

onclickはボタンがクリックされたときにButton()関数を呼び出すイベント・ハンドラです。
onClick の後に JavaScript 命令文も入れることができます。ユーザーがボタンをクリックするとき、これらの命令文は実行されます。 このButton()関数を次のように定義しておけば、その関数が実行されます。

<script>
function clickButton(){
	alert("ボタンが押されました！")
}
</script>

HTMLファイル全体では次のようになります。

<html>
<head>
<script>
      function clickButton(){
          alert("ボタンが押されました！");
      }
</script>
</head>
<body>
<form>
<input type="button" //ボタンの指定
     value="ShowAlert" //ボタン上に文字の表示
     onclick="clickButton()">
</form>
</body>
</html>

注）Button関数は<HEAD>部に記述しています。

結果は次のようになります。

 

"ShowAlert"ボタンを押してみてください。<HEAD>部で記述したButton()関数が呼び出され、メッセージ・ボックスが表示されます。

alert: 警告関数

下のスクリプトは、ボタンが押されたときにcompute()関数を呼び出します。

<input type="button" value="Calculate" 
   onclick="compute(this.form)">

ここで注意して欲しいのは、compute関数のパラメーターthis.formです。日本語に直訳すると"このフォーム"、つまりフォーム内にあるすべてのオブジェクト（ここではボタン）を意味します。ここで指定されたパラメーターは関数（ここではcompute関数）が受け取ることになります。
あとは、受け渡されたオブジェクトから様々なプロパティを利用することができます。

それでは、イベントハンドラを使用したサンプルを作成してみましょう。ここで、先ほどでてきた this.form に注意してください。フォーム内のオブジェクト（ここではボタンとテキストフィールド×２）の情報がcompute関数に引き渡されています。

<head>
<script>
function compute(form) {
   if (confirm("Are you sure?"))
      form.result.value = eval(form.expr.value)
   else
      alert("Please come back again.")
}
</script>
</head>
<body>
<form>
Enter an expression:
<input type="text" name="expr" size=15 >
<input type="button" value="Calculate"
   onclick="compute(this.form)">
<br>
Result:
<input type="text" name="result" size=15 >
<br>
</form>
</body>

Example 2:出力結果

式を入力してください

Result:

 

関連記事