JavaScript:イベント
●イベント
ユーザーの操作に反応して動作するには、
イベント、という仕組みを使用します。
動的なページを作るには欠かせない機能です。
イベントは、
主に、HTML のタグ内に埋め込んで使用します。
今までも何度か触れましたが、
<span onClick="alert('Hello')">ここをクリック</span>
の onClick がこれに当たります。
# 文字列部分をクリックすると、onClick イベントが発生
# alert('Hello') が呼ばれます。
良く使用するのは、以下のものです。
・onClick
左クリック時。
送信ボタンを押した時に、
フォーム・データ内容をチェックするのに便利です。
# 入力データに不備があれば、
# 送信を中止させる事もできます。
# 例えば、
# <input type="submit" value="送信" onClick="return test()">
# のように、
# onClick が false を返すと
# submit が、送信を行わない事を利用します。
# データに問題無ければ true、不備があれば false
# を返すような test() を用意すればいいわけです。
・onChange
状態が変わった時。
セレクト・リストやチェック・ボックスの
設定が変わった事を判別するのに便利です。
# onChange が発生するタイミングは、
# ブラウザによって微妙に異なる場合があります。
# 実際にサポートするブラウザ全てで、
# 思ったタイミングでイベントが発生するか確認しましょう。
・onLoad
データの読み込みが完了した時。
<body onLoad="initPage()">
のように、
ページが表示された直後に何かしたい場合に便利です。
●イベント・オブジェクト
イベント・オブジェクト event は、
イベントが発生した時の状態を保持しています。
が、ブラウザによる違いが多くて扱いにくいので、
例えば、後述の prototype.js などを用いるほうがラクです。