イベント処理

JavaScriptで取り扱うことのできる(ハンドルできる)イベントには、 沢山の種類がありますが、まずは、 以下に示す４つのイベントハンドラを使うことができれば十分でしょう。

onClick     → 「指定された領域でマウスがクリックされた時に、 指示された処理を行なう」

onMouseOver → 「マウスポインタが指定された領域内にある時に、 指示された処理を行なう」

onMouseOut  → 「マウスポインタが指定された領域外にある時に、 指示された処理を行なう」

onLoad      → 「そのページがブラウザに読み込まれたときに、 指示された処理を行なう」

他のイベントについて調べたいときは、 JavaScriptで取り扱うことのできるイベントの一覧が、 こちら にありますので、参照して下さい。

これまで、コメントしていませんでしたが、実は、 皆さんの知っているHTMLでもイベント処理をしていたものがあります。 わかりますか？それは、<a>タグです。

このタグを、始めて使ったときの感動を思い出しませんか？ 始めのうちは、「タグを書かなければ文章が作れないなんて、 面倒臭いなあ。ワープロならメニューから選ぶだけなのに。」 と思いながらHTMLの勉強をしていたと思います。 ところが、<a>というタグが、 簡単な記述でボタン(のようなもの)が作れ、 そのボタンを押すと別のページへジャンプできるということを知ると、 何か別世界に来たような、そんな気分になりませんでしたか？ 実は、これはイベント処理の賜(たまもの)なのです。

例えば、自分が作成するWebサイトにインコのピッピのWebページ（html）があるとして、

  <a href="./pippi.html"> インコのページへ </a>

について考えてみましょう。
このHTMLのブラウザ上での振舞いを考えてみると、 以下のようになっていることがわかります。

• まずは、「インコのページへ」 という文字を、ハイパーリンクを表す色で表示する。 (通常は下線も引かれる。)
• 「インコのページへ」と表示した部分にマウスポインタが来たら、 マウスポインタの画像を「指の画像」に変化させる。
• 「インコのページへ」と表示した部分をクリックしたら、 hrefで指定されている 「このファイルと同じフォルダ内にあるファイル pippi.html」 をブラウザ内に表示する。

この、２番目と３番目の項目が、イベント処理になっていることに気づくでしょ う。

２番目の項目では、「マウスポインタが、指定された領域内にある」 というイベントが発生したら、 「マウスポインタの画像を「指の画像」に変化させる」 という処理を行なっています。 ３番目の項目も、同様です。
つまり、「指定された領域にマウスが存在する」イベントと、 「マウスがクリックされた」というイベントをハンドル (管理運用)するイベントハンドラが、タグ<a>には、 含まれていると言うことになります。

このため、タグ<a>の動作は、 「リンク(ボタン)をクリックすれば、別のページへジャンプする」という ページを見た人のマウス操作で決まることになります。 もし、リンクをクリックしなければ、そのページのままですよね。

タグ<a>がイベント処理を含んでいると言うことが、他のタグと根本的 に動作が異る(動きがある)ゆえんであり、 我々に感動を与えてくれるゆえんだったです。

ただし、これまでは、 <a>タグが最初からもっているイベントハンドラの機能だけを使っていました。それでも、十分感動ものなのですが、JavaScriptを使うと、 同じイベントでも、別の処理を指定したり、 別のイベントによって、処理を指定したりすることができます。

まずは、次の文を見て下さい。

 <a href="#" onClick="alert('ごめんなさい。')"> インコのページへ </a>

先の例と比べてみると、２箇所が変わっています。

まずは、「href="#"」です。

属性 href の値として "#" を指定すると、 このページの先頭にジャンプします。これは、

 <name="anogyo">
    .
    .

 <a href="#anogyo">「あの行」へジャンプ</a>

のように、同じページ内のどこかへジャンプするときの機能を利用しています。 ただ、'name'で定義されていない場所へのジャンプは、 先頭へのジャンプということになります。
ここでは、<a>タグが本来もっている 『「マウスクリック」イベントが発生したら、 別のページへジャンプする』という 「イベントハンドル」の機能中の、 『「マウスクリック」イベントが発生したら』 という部分のみを利用するために、単に href に "#" が指定されています。

次は、「onClick="alert('ごめんなさい。')"」です。

「onClick」は、この章の最初でも示したように、 「指定された領域でマウスがクリックされた時に、 指示された処理を行なう」イベントハンドラの一つです。
ここでの「指定された領域」というのは、 ブラウザ上の「インコのページへ」という文字が表示されている領域です。
また、「指示された(る)処理」というのは、 「alert('ごめんなさい。')」です。一般に、この「指定される処理」は、 JavaScriptがもっているメソッド(関数)か、 自分で定義したメソッド(関数)です。
今回は、 「alert()」というJavaScriptがもっているメソッドを指示しています。 このメソッドは、引数として書いた文字(括弧の中に書いたもの)を、 ダイアログと呼ばれる表示用のウィンドウに表示します。

このように、イベントハンドラは、 「イベントハンドラ」というオブジェクトに、 その値として「指示する処理」を '=' で設定することにより、 動作を規定するということになります。

ということで、上記の文は、<a>タグを使っているのに、 「インコのページへ」をクリックすると、 別のページを表示せずに、 「ごめんなさい」という文字の書かれたダイアログが表示されます。
実際に、以下のリンクをクリックして、動作を確認してみて下さい。

ところで、href="#"の所を、 以下のように通常のリンクに変えてみたらどうなるでしょう？

 <a href="http://www.kumamoto-u.ac.jp/"
     onClick="alert('ごめんなさい。')"> 今度こそ、インコのページへ </a>

わかりますか？動作を予想してみて下さい。
予想できたら、以下のリンクをクリックして、予想と比べてみて下さい。

予想通りでしたか？

解説すると、以下のようになります。
<a>タグの表示機能とイベントハンドラの機能で、 「今度こそ、インコのページへ」を表示し、その部分をクリックすると、 熊大のトップのWebページへジャンプしようとします。ところが、 'onClick'イベントハンドラが設定されているので、 「今度こそ、インコのページへ」をクリックしたイベントを、 このハンドラが先に処理します(「ごめんなさい」のダイアログを表示)。 そして、このダイアログを閉じると、 本来の<a>の処理である 「熊大のトップのページを表示する」処理をすることになります。

前の例では、<a>タグで、「リンク先にジャンプする」 という本来のイベント処理の代わりに、 「アラート・ダイアログを表示する」 という、新しい処理の指定方法を示しました。
ただこの場合、扱うことのできるイベントは、 <a>タグが本来もっている 「指定された領域でマウスがクリックされた」 イベントにしか対応することができません。
今度は、対応できるイベントを変えてみましょう。

それには、別のイベントハンドラを使うことで解決できます。

次の文を見て下さい。

 <a href="#" onMouseOver="alert('ごめんなさい。')"> 絶対、インコのページへ </a>

これは、イベントハンドラを 'onMouseOver' に変更しただけです。 これは、 「マウスポインタが指定された領域内にある時に、指示された処理を行なう」 イベントハンドラですが、上記の例では、 マウスポインタが「絶対、インコのページへ」にある時に、 'ごめんなさい'のダイアログを開く事になります。

実際に下のリンク(らしき)所に、マウスポインタを移動させると、 ダイアログが開くことが確認できます。

この場合、リンク(らしき)所をクリックすることはできません。
なぜなら、クリックしようと思って、 「絶対、インコのページへ」のところへポインタを移動させると、 クリックする前に必ず、 'onMouseOver'イベントハンドラがイベント処理を行なうので、 クリックする処理にたどり着くことができないからです。

ところで、これまでは、 イベントハンドラがイベントを検知して行なう処理は、 すべてJavaScriptがもっているメソッドでしたが、 自分で定義する(作る)メソッド(関数)を処理させることができます。

例えば、以下がその例です。

 <script type="text/javascript">
  <!--
    function myalert() {
      alert('ごめんなさい。');
      alert('やっぱり、インコのページにはジャンプできません。');
    }
  //-->
 </script>

 <a href="#" onMouseOver="myalert()"> きっと無理だろうけど、インコのページへ </a>

<script>タグの中が、自分で作ったメソッド(処理)です。

  ところで、前に勉強したように、自分でメソッドを定義する書式は、 以下のようになります。

 function 自分の好きなメソッド名(引数1, 引数2, ...) {
   処理１;
   処理２;
     .
     .
 }

• 始めは、'function' です。 (「function」には、「機能」や「関数」という意味があります。 )
• メソッドの名前は、JavaScript自身がもっていないメソッド名であれば、 適当に付けることができます。
• 引数は、定義したメソッドを実行する際の入力となるものです。 入力が必要無ければ、引数は不要です。
• 処理は、必要な処理を並べます。必要であれば、 分岐や繰り返し処理も書きます。

上の例では、'myalert'という名前で、メソッドを定義しています。
引数(入力)は、ありません。実際の処理は、alert()を２度実行することです。

ブラウザには、「きっと無理だろうけど、インコのページへ」 だけが表示されます。 その表示されている文字のところにマウスポインタをもって行くと、 'onMouseOver' イベントハンドラが、イベントを検知し、 myalert()が実行されます。

動作は、下のリンクの上にマウスポインタをもって行くと確認できます。

予想通りの動作をしましたか？