イベント

イベントの種類

イベントハンドラとイベントオブジェクト

フォームのボタンをクリックする、キーボードのボタンを押すなど特定のイベントが発生した時に、処理を実行する事をイベントハンドラといいます。

イベントの発生を取得する方法には、イベントハンドラを使う方法とイベントオブジェクトを使う方法の2種類があります。

イベントハンドラ
onchange	フォームの内容が変化し、フォーカスがフォームから離れた時
onClick	オブジェクトをクリックした時
onload	ページや画像が読み込まれた時
onmouseover	マウスカーソルが通過した時
onmouseover	マウスカーソルが上に来た時
onmouseout	マウスカーソルが離れた時
onmousemove	マウスカーソルが移動した時
onsubmit	フォームが送信された時
onreset	リセットボタンが押された時

イベントタイプ
MouseDown	ユーザーがマウスボタンを押した時をイベントとします。	Button,document,Link
MouseOut	オブジェクトからマウスカーソルが離れた時をイベントとします	Area,Layer,Link
MouseOver	オブジェクトにカーソルが乗った時をイベントとする	Area,Layer,Link
MouseUp	ユーザーがマウスボタンを離した時をイベントとする。	Button,document,Link

※尚、イベントハンドラを使用するときは、下記を記述します。


<meta http-equiv="Content-Script-Type" content="text/javascript" />

▲このページのTOPに戻る▲

onload

使い方

onloadイベント

ページや画像などデータの読み込みが完了した時やページの切り替え時に発生しるイベント。
読み込み完了と同時に何らかのイベントの処理を行いたい時に使用する。


【 外部ファイル 】
window.onload=function(){
	処理
}

window.onload=forcus; //関数を使う時は()を付けない
function forcus(){
	処理
	}
-----------------------------------------------------
＜＜HTMLのﾎbody部分に記述する方法＞＞
<body onload="処理" />

■onunloadイベント

他のページに移動する時に発生するイベント

▲このページのTOPに戻る▲

>フォーカスの移動時に処理を行いたい

使い方

onfocus = 実行する命令（関数名）	フォーカスが合った時に発生するイベント
onblur = 実行する命令（関数名）	フォーカスが離れた時に発生するイベント

テキストフィールドの背景色を変える


<html>
<script type="text/javascript">
	function set(elm,f){
		flg=(f=='on');
		elm.style.backgroundColor=flg?'Ivory':'';
	}
</script>
<body>
<form action="" method="" id="fm1" >
入力1：<input type="text" onfocus="set(this,'on')" onblur="set(this,'off')">
入力2：<input type="text" onfocus="set(this,'on')" onblur="set(this,'off')">
入力3：<input type="text" onfocus="set(this,'on')" onblur="set(this,'off')">
</form>
</body>
</html>

---------------------------------------------

または
<script type="text/javascript">
	function set(elm,f){ //elmにthis、fに'on'をセット
		if(f=='on'){ //fが'on'だったならば、
			elm.style.backgroundColor="red";
		}else{
			elm.style.backgroundColor="#FFFFFF";
		}
	}
</script>

▲このページのTOPに戻る▲