|
||||
home / Knave web lecture / JavaScript / 9章 JavaScriptとHTMLの連携 ( 前編 ) |
|
|
イベントドリブン
イベントドリブンとは何・・・と言う方のために、先ずはこのイベントドリブンについての説明です。
例えば InternetExploreの更新ボタンをクリックしたとします。そうした場合当然ながら InternetExploreは現在のページを更新するという動作を行います。[ 更新ボタンをクリックする ] → [ ボタンをクリックするというイベント ] になり、このイベントを合図としてこのイベント用に作成された更新する処理を実行しているのです。 つまりプログラムを開発する側としては、そのイベント時に起動する関数を記述しておけば、 [ 内部的にイベントを監視しそのイベントが起きた時点で自動的に指定した関数を起動する ] という複雑な処理を内部的に行ってくれます。これによって作成時にはイベントの監視とかそういった事に労力を割かれる事無く、対応したイベントに対しての処理作成に集中する事が出来ます。 [ sample ] [ source ]
<script language="JavaScript"> <!-- function fnc1(){ alert("ボタンがクリックされました。"); } //--> </script> <input type=button value=" ♂ " onClick=fnc1()> onClick が対象がクリックされた事を表わすイベントになります。 onClick=fnc1() と記述することで、このイベントが発生した時は fnc1へ制御を移すように指定しています。とても簡単ですね。 省略した記述 また上と同様の処理を関数を作成せずに簡単な記述で行う事も可能です。 [ sample ] [ source ]
<input type=button value=" ♂ " onClick='alert("ボタンがクリックされました(省略形)");'>
onClick
対象オブジェクトがクリックされた時に発生するイベント
[ sample ] [ source ]
<input type=button value=" ♂ " onClick='alert("ボタンがクリックされました");'>
onDblClick
対象オブジェクトがダブルクリックされた時に発生するイベント
[ sample ] [ source ]
<input type=button value=" ♂ " onDblClick='alert("ダブルクリックされました。");'>
onMouseDown
対象オブジェクト上でマウスが押された時に発生するイベント
[ sample ] [ source ]
<input type=button value=" ♂ " onMousedown='alert("マウスが押されました。");'>
onMouseUp
対象オブジェクトからマウスを上げた時に発生するイベント
[ sample ] [ source ]
<input type=button value=" ♂ " onMouseUp='alert("マウスが上げられました。");'>
onMouseOver
対象オブジェクトにマウスが重なった時に発生するイベント。
[ sample ] [ source ]
<input type=button value=" ♂ " onMouseOver='alert("マウスが重なりました。");'>
onMouseOut
対象オブジェクトからマウスが離れた時に発生するイベント
[ sample ] [ source ]
<input type=button value=" ♂ " onMouseOut='alert("マウスが離れていきます。");'>
onKeyPress
キーボードが押された時に発生するイベント。
[ sample ] [ source ]
<input type=button value=" ♂ " onKeyPress='alert("キーボードが押されました。");'>
onKeyDown
キーボードが押された時に発生するイベント。onKeyDownイベントが発生する前に発生します。
[ sample ] [ source ]
<input type=button value=" ♂ " onKeyDown='alert("キーボードが押されました。");'> onKeyUp
キーボードが上げられた時に発生するイベント。
[ sample ] [ source ]
<input type=button value=" ♂ " onKeyUp='alert("キーボードが上げられました。");'> onChange
オブジェクトの内容が変更された時に発生するイベント。タイミングはカーソルを外した時点で発生します。
[ sample ] [ source ]
<input type=text value="Change!!" onChange='alert("内容が変更されました");'> onFocus
オブジェクトが選択された時に発生するイベント。
[ sample ] [ source ]
<input type=text value="Change!!" onFocus='("選択されました");'> onLoad
オブジェクトが読み込まれた時に発生するイベント。
[ sample ] リンクしていますクリックして下さい。 [ source ]
<html> <body onLoad='alert("読み込まれました");'> </body> </html> |