|
|
JavaScriptで書いてみよう！
（イベントハンドラ）
ここではイベントハンドラについて説明します。
JavaScriptアプリケーションのほとんどはイベントドリブンです。イベントは通常はユーザが何かをした結果として起るアクションです。例えば、ボタンをクリックする、テキストを書き換える、マウスをリンクに重ねるなどはイベントです。イベントによりスクリプトを実行するためには、onChange、onClickなどのイベントハンドラを定義します。
イベントハンドラはJavaScriptのベンダ、バージョンにより異なっています。
JavaScript v1.3におけるイベントハンドラは以下のとおりです。
| イベント | 対象 | 契機 | イベントハンドラ |
|---|
| Abort | images | ユーザがイメージのロードを中止した（例えば、リンクまたはストップボタンをクリックした） | onAbort |
| Blur | windows and all form elements | ユーザがウィンドウまたは要素からフォーカスを移動した | onBlur |
| Change | text fields, textareas, select lists | ユーザが要素の値を変更 | onChange |
| Click | buttons, radio buttons, checkboxes, submit buttons, reset buttons, links | ユーザがフォームの要素またはリンクをクリックした | onClick |
| DragDrop | windows | ユーザがファイルなどのオブジェクトをブラウザのウィンドウにドロップした | onDragDrop |
| Error | images, windows | ドキュメントまたはイメージのロードがエラーになった | onError |
| Focus | windows and all form elements | ユーザがウィンドウまたは要素にフォーカスを与えた | onFocus |
| KeyDown | documents, images, links, text areas | ユーザがキーを押した | onKeyDown |
| KeyPress | documents, images, links, text areas | ユーザがキーを押したままにした | onKeyPress |
| KeyUp | documents, images, links, text areas | ユーザがキーを放した | onKeyUp |
| Load | document body | ユーザがページをロードした | onLoad |
| MouseDown | documents, buttons, links | ユーザがマウスのボタンを押した | onMouseDown |
| MouseMove | nothing by default | ユーザがマウスのカーソルを移動させた | onMouseMove |
| MouseOut | areas, links | ユーザがマウスのカーソルをクライアントサイドイメージマップまたはリンクの外側に移動させた | onMouseOut |
| MouseOver | links | ユーザがマウスのカーソルをリンクの上に移動させた | onMouseOver |
| MouseUp | documents, buttons, links | ユーザがマウスのボタンを放した | onMouseUp |
| Move | windows | ユーザまたはスクリプトがウィンドウを移動させた | onMove |
| Reset | forms | ユーザがフォームをリセットした（リセットボタンを押した） | onReset |
| Resize | windows | ユーザまたはスクリプトがウィンドウの大きさを変えた | onResize |
| Select | text fields, textareas | ユーザがフォームの要素の入力フィールドを選択した | onSelect |
| Submit | forms | ユーザがフォームをサブミットした（サブミットボタンを押した） | onSubmit |
| Unload | document body | ユーザがページを抜けた | onUnload |
イベントハンドラの定義
イベントをハンドルするためにイベントハンドラ（JavaScriptの関数またはステートメントの並び）を定義します。イベントがあるHTMLタグを対象としているならば、そのタグにイベントハンドラを定義することができます。イベントハンドラの名前はイベントの前に"on"をつけます。例えば、facusイベントのイベントハンドラはonFocusです。
HTMLタグにイベントハンドラを作成するには、タグにイベントハンドラ属性を追加します。属性の値としてJavaScriptのコードをクォートの中に記述してください。
構文：
<TAG eventHandler="JavaScript Code">
computeという関数を作成し、この関数をボタンのクリックにより呼び出したい場合、以下のように記述します。
例：
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
イベントハンドラを作成した場合、対応するJavaScriptのオブジェクトはイベントハンドラ名を小文字にしたプロパティを持つことになります。
前述の例では、onclickプロパティの値は"compute(this.form)"になります。
ダブルクォートはシングルクォートに交換することを忘れないでください。
例：
<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"
onClick="window.open('mydoc.html', 'newWin')">
例：イベントハンドラを使う
省略
イベントハンドラを厳密に呼び出す
省略
イベントオブジェクト
イベントキャプチャリング
フォーム入力の評価
JavaScriptの最も重要な使用方法の一つは、サーバのプログラムのためにフォーム入力の評価を行なうことです。これは以下のように便利です。
・サーバの負荷を減らす。データは事前に評価し、問題があればサーバに渡さないようにできる。
・ユーザのエラーに対し、遅れを減らす。他の方法では、データをサーバに送り、サーバで評価し、クライアントに結果を返すことになる。
・サーバのプログラムを簡単にできる。
一般的に、少なくとも二個所で入力を評価したいはずです。
・ユーザがデータを入力したとき、フォームの各要素のonChangeイベントハンドラを用います。
・ユーザがフォームをサブミットしたとき、フォームのサブミットするボタンのonClickイベントハンドラを用います。
評価関数の例
省略
評価関数を使用する
省略
ホームページへ戻る
|