熊本大学大学院教授システム学専攻
目次:
【第11回】JavaScript 1 (インタラクティブなページ)
第1章
--第11回タスクチェッカー
※公開科目にはありません
第3章
--処理の適用
第4章
第5章
現在の場所: ホームページ > [3]JavaScriptによる動的Webページ > 【第11回】JavaScript 1 (インタラクティブなページ) > 第3章 > 処理の適用(2) ~イベントとイベントハンドラ

処理の適用(2) ~イベントとイベントハンドラ

【本節の目的】
「イベント」の意味を理解し、「イベントハンドラ」の働きを学習します。

イベント

一般に、ある対象に対して なんらかのアクションが発生した(例えば、「マウスをクリックした」)ときに 発信される信号のことを、イベントと呼びます。

例えば、Webブラウザの「戻る」ボタンがクリックされたときには、 「戻るボタンに対して、マウスがクリックされた、というイベントが発生した」 というように呼びます。

(註) 「イベントが発生した」というのは、 そのような電気信号が発生していると考えるのではなく、 そのような現象が発生しているという抽象的な信号が発生していると考えて下さい。

ただ、「イベントが発生」するだけでは、 一般的に、PCの画面に(あるいは動作に)変化はありません。 それは、イベントに対しては、 基本的に無視するように設計されているからです。 なぜなら、PCでは常に様々なイベントが発生しているため、 それらすべてを対処していたら、 本来行なうべき処理が何もできなくなってしまうからです。

イベントハンドラ

すべてのイベントを無視した上で、 必要なイベントに対してのみ決まった処理をすることで、 PCを有効に活用することができるのです。 その、「必要なイベントに対して決まった処理をする」 役割を果たすもの(プログラム)を イベントハンドラと呼びます。 ですから、イベントハンドラは、

  1. 特定のイベントの発生を監視して、
  2. そのイベントが発生したら、決められた処理を実行する (依頼する)

という仕事をすることになります。

イベントハンドラの働きの例を見てみましょう。 下の図では、 OnMouseOverという名前のイベントハンドラが、 Webブラウザ上の鯛の絵の領域にマウスポインタが入るイベントを監視しています。

未だ来ない?

対象のイベント(マウスポインタが鯛の絵に来ること)が発生すると、 「鯛の絵の代わりに骨の絵を表示する」という処理を、 PC(実際にはWebブラウザ)に依頼します。

来た!

すると、処理が実行され、鯛の絵が骨の絵に代わります。

骨の絵に!

ところで、HTMLで利用できるイベントハンドラは色々ありますが、 以下の3つを知っているだけで、マウス操作に関するイベントは、 ほとんど処理できるでしょう。

イベントハンドラ名 処理の内容
onClick 指定された領域でマウスがクリックされた時に、指示された処理を行なう
onMouseOver マウスポインタが指定された領域内に入る時に、指示された処理を行なう
onMouseOut マウスポインタが指定された領域外に出る時に、指示された処理を行なう

Webブラウザは、色々なイベントを監視していて、 例えば、「戻る」ボタンの領域がクリックされたというイベントを検知すると、 前のページへ戻るというような処理をしてくれています。

Copyright (C) Kenichi Sugitani, Hideki Matsuda, Chisato Noguchi and Fumiko Ryu 2005-2006, All Rights Reserved