Home > フォームのイベントハンドラ
イベントハンドラとは
ページをロードしたり、フォームのボタンをクリックするといった特定の動作が発生したタイミングをイベントといいます。イベントハンドラはこのイベントの取得を行い、設定した処理を実行することができます。
イベントハンドラの宣言方法として以下の2つの方法をご紹介します。
1.タグ内にイベントハンドラを宣言する方法
タグ内でイベントハンドラを宣言する場合は以下のように記述します。
<････ onイベント名 = 処理･･･>
以下のサンプルではタグ内にイベントハンドラを宣言してクリックイベントでアラートメッセージを表示させています。
<form action="#">
<input type="button" value="OK" onclick="window.alert('clickイベント')">
</form>
以下のサンプルではタグ内にイベントハンドラを宣言してクリックイベントで独自に定義した関数を呼び出してアラートメッセージを表示させています。
<script type="text/javascript">
function btn_ok(){
window.alert('clickイベント');
}
</script>
<form action="#">
<input type="button" value="OK" onclick="btn_ok()">
</form>
2.ページのloadイベントでイベントハンドラを宣言する方法
ページのloadイベントでイベントハンドラを宣言する場合は、getElementByIdメソッドを使用して以下のように記述します。
window.onload = function(){
document.getElementById('ID値').onイベント名 = function(){
処理･･･
}
}
以下のサンプルではページのloadイベントでイベントハンドラを宣言してクリックイベントでアラートメッセージを表示させています。
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn_ok').onclick = function(){
window.alert('Hello JavaScript World!!');
}
}
</script>
<form action="#">
<input id="btn_ok" type="button" value="OK">
</form>