Perl/ActivePerl For UNIX/Linux/Windows
 
TryThe Homepage
初めてのCGI
CGI 研究室
ダイナミックCGI
ダウンロード
サービス
サーバ構築(Windows)
データベースアクセス
有料サービス
FAQ
お問い合わせ
このページを印刷
イベントの処理
現在のところ、作成されたオブジェクトからonclickや、onmouseover、onmouseoutは、同じように動作しますが、 Windowでクリックされた位置の取得がMicrosoftInternetExplorerとNetscapeNavigator が大きく違い、 どうしても1つのスクリプトで記述することができません。しかしながらCGIで使用する場合は、 ブラウザを取得して作成するDynamicHTMLを変える事で対応する事が可能です。 本章では、マウスイベントを中心にブラウザのイベントハンドラーを学習します。
  • onclick
    もっとも基本的なイベントで、マウスの左ボタンを1度押して、離した時発生します。
    押したままだと発生しません。押した位置と離した位置がほぼ同じ場合がクリックです。
    押しただけではonmousedownが発生します。
    <p onclick="alert('マウスがクリックされました。')">ここをクリックしてください</p>
    <input type=button value=Button1 onclick="alert('ボタンがクリックされました。')">


  • onmousedown
    マウスのボタンが押された時発生します。
    onclickが押して、離した時発生するのに対し、onmousedownは、ボタンを押した瞬間に発生します。
    <p onmousedown="alert('マウス押されました。')">ここを押してください</p>
    <input type=button value=Button1 onmousedown="alert('ボタンが押されました。')">


  • onmouseup
    マウスのボタンが離された時発生します。
    他の位置で押された場合でも、離されたオブジェクトで発生します。
    <p onmouseup="alert('マウスが離されました。')">ここで離す</p>
    <input type=button value=Button1 onmouseup="alert('ボタンで離されました。')">


  • onmouseover
    マウスカーソルがオブジェクト上に移動した時発生します。
    <p onmouseover="alert('テキスト領域です。')">ここはテキスト領域</p>
    <input type=button value=Button1 onmouseover="alert('ボタン領域です。')">


  • onmouseout
    マウスカーソルを一度オブジェクト上に置き、離れた時発生します。
    <p onmouseout="alert('テキストから離れました。')">ここはテキスト領域</p>
    <input type=button value=Button1 onmouseout="alert('ボタンから離れました。')">

    onmouseoverとonmouseoutで動的にボタンの名称を変更したり、画像を変更する事もできます。
    <input type=button value=ボタンは押せません
      onmouseover="this.value='ボタンが押せます'"
      onmouseout="this.value='ボタンは押せません'">
    <p>
    <img src='images/Papio.gif'
      onmouseover="this.src='images/Papio2.gif'"
      onmouseout="this.src='images/Papio.gif'">

    ご覧のようにイベントそのものにブラウザによる違いはほとんどありません。
    多少、NetscapeNavigatorのタイミングが遅いということは有ります。

  • マウスが押された位置を取得
    これが問題の座標の取得です。
    IEはeventオブジェクトで簡単に取得できるのですが、
    <SCRIPT LANGUAGE=javascript FOR=document EVENT=onmousedown>
      <!--
        document_onmousedown();
        function document_onmousedown() {
          var x=event.clientX;
          var y=event.clientY;
          alert('X = '+x+'\nY = '+y);
        }
      //-->
    </SCRIPT>
    <p align=center>ウィンドウ上でマウスをクリックしてください。</p>
    NetscapeNavigatorではイベント発生時に何も渡さず関数を呼び出します。
    <SCRIPT LANGUAGE=javascript>
      <!--
        window.onmousedown=document_onmousedown;
        function document_onmousedown(Ev) {
          var x=Ev.clientX;
          var y=Ev.clientY;
          alert('X = '+x+'\nY = '+y);
        }
      //-->
    </SCRIPT>
    <p align=center>ウィンドウ上でマウスをクリックしてください。</p>
    マウスが押された座標が必要な場合は、CGIで
    if ($ENV{'HTTP_USER_AGENT'} =~ /MSIE/i) { $IeFlag = 1; }
    の用にブラウザのフラグを設定してコードを変更します。

  • onchange
    ここからはフォームに関するイベントです。
    onchangeイベントは、フォームのテキストボックスや、テキストエリアの内容が変更された時発生します。
    <input type=text name=text1 onchange="alert('テキストが変更されました。');">
    <p>テキストボックスに何か入力してください。</p>

    通常は、テキストを変更後フォーカスが移動した時発生します。

  • onfocus
    フォームのテキストボックスや、テキストエリアにカーソルが移動した時発生します。
    テキスト1:
    <input type=text name=text1 onfocus="alert('これはテキスト1です。');">
    <p>
    テキスト2:
    <input type=text name=text2 onfocus="alert('これはテキスト2です。');">


  • onblur
    onfocusの逆の動作をします。一度アクティブになり、フォーカスを失う時発生します。
    カーソルをテキストボックスからテキストボックスに移動してください。<p>
    テキスト1:
    <input type=text name=text1 onblur="alert('テキスト1から離れました。');">
    <p>
    テキスト2:
    <input type=text name=text2 onblur="alert('テキスト2から離れました。');">

Copyright 2004 Terra. All rights reserved. No reproduction or republication without written