●イベントとイベントハンドラ
・イベントハンドラの概要
ネットスケープ・ナビゲーターやインターネット・エクスプローラーなどのブラウザには、JavaScriptが識別することのできるイベントが用意されています。イベントは、日本語に訳すと"出来事"です。たとえば、ボタンをクリックする、テキストを入力する、というのがイベントです。
JavaScriptはそれらのイベントをとらえて、それに反応するスクリプトを定義できます。その、イベントを定義するのがイベントハンドラです。
イベントハンドラには以下の9種類があります。
onBlur onClick onChange onFocus onLoad
onMouseOver onSelect onSubmit onUnload
HTMLに表示するボタンは次のようにフォームの<input>タグのtypeオプションにbottonと指定すれば作成できます
<FORM>
<INPUT TYPE="botton"
VALUE="ボタン"
onClick="Botton()">
</FORM>
onClickはボタンがクリックされたときにBotton()関数を呼び出すイベント・ハンドラです。onClick
の後に JavaScript
命令文も入れることができます。ユーザーがボタンをクリックするとき、これらの命令文は実行されます。
このBotton()関数を次のように定義しておけば、その関数が実行されます。
Scrｉptを使用しなくても、<FORM>タグの利用だけでも実行可能です。しかし、同じ動作を繰り返し行う場合は、Ｓｃｒｉｐｔを使用すべきでしょう。
<script language="JavaScript">
function Button(){ alert("ボタンが押されました！")
}
</script>
HTMLファイル全体では次のようになります。
・サンプル２
<HTML> <HEAD><TITLE>イベントとイベントハンドラ</TITLE>
<script language="JavaScript">
function Button(){
alert("ボタンが押されました！");
}
</script> </HEAD>
<BODY>
<FORM>
<INPUT TYPE="Button" //ボタンの指定
VALUE="押してちょ" //ボタン上に文字の表示
onClick="Button()">
</FORM> </BODY> </HTML>
注）Button関数は<HEAD>部に記述しています。これにより、そのページ内では<FORM>タグをどこで使用しても、ＯＫです。
結果は次のようになります。
|
