９．イベント処理
９ー１．読み込み完了(1)
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>読み込み完了</TITLE>
<SCRIPT Language="JavaScript">
<!--
function ev1()
{alert("ページ読み込みが完了しました");}
window.onload=ev1;
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
 本例はページが完全に読み込まれたらｅｖ１実施
 
9-1実行
 


９−２．読み込み完了(2)
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>読み込み完了</TITLE>
<SCRIPT Language="JavaScript">
<!--
function ev2(){alert("ページ読み込みが完了しました");}
//-->
</SCRIPT>
</HEAD>
<BODY onload="ev2()">
</BODY>
</HTML>
 上記と同じであるが、最近はこちらの記述が一般的
 
9-2実行
 


９−３．マウスクリック
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>マウスクリック</TITLE>
<SCRIPT Language="JavaScript">
<!--
function input(){
alert("ボタンがクリックされました");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Myfn">
<INPUT TYPE="button" VALUE="ボタン" onClick="input()">
ボタンをクリックして下さい（クリックイベントCheck)<br>
</FORM>
</BODY>
</HTML>
 マウスクリックをクリックした時イベント発生
 
9-3実行
 


９−４．自動クリック
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>自動クリック</TITLE>
<SCRIPT Language="JavaScript">
<!--
function input(){
alert("ボタンがクリックされました");
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="document.Myfm.mybut.click()">
<FORM NAME="Myfm">
<INPUT TYPE="button" VALUE="ボタン" NAME="mybut"
onClick="input()"><br>
ボタンをクリックして下さい（クリックイベントCheck)<br>
(読み込み完了で１回自動クリックします）
</FORM>
</BODY>
</HTML>
 		内容としては前項と同じですが、こちらは強制的に自動クリック
 
9-4実行
 


９−５．ダブルクリック
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>ダブルクリック</TITLE>
<SCRIPT Language="JavaScript">
<!--
function input(){
alert("ダブルクリックされました");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Myfn">
<INPUT TYPE="button" VALUE="ボタン" ondblclick="input()">
ボタンをダブルクリックして下さい（イベントCheck)<br>
</FORM>
</BODY>
</HTML>
 マウスクリックをダブルクリックした時イベント発生
 
9-5実行
 


９−６．マウスダウン
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>マウスダウン</TITLE>
<SCRIPT Language="JavaScript">
<!--
function input(){
alert("マウスダウンされました");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Myfn">
<INPUT TYPE="button" VALUE="ボタン"
onmousedown="input()">
ボタンをマウスダウンして下さい（イベントCheck)<br>
</FORM>
</BODY>
</HTML>
 マウスボタンを押した時イベント発生
 
9-6実行
 


９−７．マウスアップ
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>マウスアップ</TITLE>
<SCRIPT Language="JavaScript">
<!--
function input(){
alert("マウスアップされました");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Myfn">
<INPUT TYPE="button" VALUE="ボタン"
onmouseup="input()">
ボタンをマウスアップして下さい（イベントCheck)<br>
</FORM>
</BODY>
</HTML>
 マウスボタンを離した時イベント発生
 
9-7実行
 


９−８．キーダウン
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>キーダウン</TITLE>
<SCRIPT Language="JavaScript">
<!--
function input(theEvent){
alert("キーが押されました");
}
document.onkeydown = input;
//-->
</SCRIPT>
</HEAD>
<BODY>
どれかキーを押して下さい（イベントCheck)
</BODY>
</HTML>
 キーを（どのキーでもOK)押した時イベント発生
 
9-8実行
 


９−９．キーアップ
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>キーアップ</TITLE>
<SCRIPT Language="JavaScript">
<!--
function input(theEvent){
alert("キーが離されました");
}
document.onkeyup = input;
//-->
</SCRIPT>
</HEAD>
<BODY>
どれかキーを押して離して下さい（イベントCheck)<br>
</BODY>
</HTML>
 キーを押して離した時イベント発生
 
9-9実行
 


９−１０．フォーカスイベント
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>フォーカスイベント</TITLE>
<SCRIPT Language="JavaScript">
<!--
function input(theEvent){
alert("フォーカスされた");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="text" onFocus="input()"><br>
テキストボックスをフォーカス（入力可状態にするとイベント発生）
</FORM>
</BODY>
</HTML>
 テキストボックスを入力可状態にするとイベント発生
 
9-10実行
 


９−１１．チェンジイベント(OPTION)
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>チェンジイベント</TITLE>
<SCRIPT Language="JavaScript">
<!--
function opch(){
alert("変更されました");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SELECT NAME="Myop" onChange="opch()">
<OPTION VALUE="項目1">メニュー０
<OPTION VALUE="項目2">メニュー１
<OPTION VALUE="項目3">メニュー２
</SELECT>
</FORM>
</BODY>
</HTML>
 選んだ内容が変わった時イベント発生
 
9-11実行
 


９−１２．チェンジイベント(text)
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>チェンジイベント</TITLE>
<SCRIPT Language="JavaScript">
<!--
function change(){
alert("文字が「" + Myfm.txt.value +"」に変更されました");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Myfm">
<INPUT TYPE="text" NAME="txt" SIZE=30 MAXLENGTH=20
onChange="change()"><br><br>
テキストボックスの文字に変更があっても、テキストボックス
以外の何処かをクッリックしないとアラートは表示されません。
</FORM>
</BODY>
</HTML>
 		選んだ内容が変わった時イベント発生
 
9-12実行
 
本例は、テキストボックスの文字に変更があっても、
テキストボックス以外の何処かをクッリックしないと
アラートは表示されません。

９−１３．キーダウンイベント(Enterキー)
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>チェンジイベント</TITLE>
<SCRIPT Language="JavaScript">
<!--
function change(){
if (event.keyCode == 13){
alert("文字が「" + Myfm.txt.value +"」に変更されました");
}
else
return
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Myfm">
<INPUT TYPE="text" NAME="txt" SIZE=30
MAXLENGTH=20 onkeydown="change()"><br><br>
このサンプルは「Enterキー」を押すと、テキストボックス
の内容をアラートに表示。
</FORM>
</BODY>
</HTML>
 9-11a項のtext以外クリックを「Enterキー」に変更
（本項はキーダウンイベントです）
 
9-13実行
 
このサンプルは「Enterキー」を押すと、
テキストボックスの内容をアラートに表示。


９−１４．選択イベント
ＪａｖａSｃriｐt 記事
<HTML><HEAD><TITLE>選択イベント</TITLE>
<SCRIPT Language="JavaScript">
<!--
function opch(){
alert("選択されました");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
テキストの文字が選択された時発生
<FORM name="Myfm">
<INPUT TYPE="text" VALUE="テスト" onSelect="opch()">
</FORM>
</BODY>
</HTML>
 テキストの文字が選択された時イベント発生
 
9-14実行
 



【HOME】　【基礎編へ戻る】