Webブラウザのイベントを扱う

javaScriptに限らず、プログラミングにおいてイベントの取り扱いが重要です。何かが起きたときに生まれるメッセージみたいなものです。javaScriptに用意されているイベントハンドラというものを使うと、このイベントをキャッチして、適切な処理を行うことができます。

ユーザーがーWebページにあるボタンをクリックすると、「click」というイベントが発生します。onclickというイベントハンドラを使用すると、clickイベントをキャッチできます。これを使用することで、ユーザーが「計算」ボタンをクリックしたときに計算を実行するといった処理ができるようになります。

サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>イベントハンドラ</title>
   
</head>
<body>
    
<form id="testForm" name="testForm">
    <input type="button" value="クリックすると" 
           name="button1" onclick="func1('クリックされた');">
</form>
    
<script>
function func1(str){
    alert( str );
}
function init(){
    alert("documentロード完了");
}
    
window.onload = init;
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>イベントハンドラ</title>

</head>

<body>

<input type="button" value="クリックすると"

name="button1" onclick="func1('クリックされた');">

</form>

function func1(str){

alert( str );

}

function init(){

alert("documentロード完了");

}

window.onload = init;

</script>

</body>

</html>

イベントハンドラの書き方

HTMLタグ内にイベントハンドラを設定

javaScriptでイベントハンドラを設定する方法は、いくつかあります。まず、HTMLタグの属性として設定する方法を書いていきます。以下のように書きます。

　<HTMLタグ イベントハンドラ ="実行するステートメント">

1	<HTMLタグイベントハンドラ ="実行するステートメント">

サンプルコード上に書いてあるイベントハンドラ「onclick」はクリックされたときのイベントハンドラで、ボタンを押されたときにステートメントとしてfunc1関数を呼び出しています。

　onclick="func1('クリックされた');"

1	onclick="func1('クリックされた');"

今回、func1の引数「クリックされた」が「'」で囲まれています。ステートメント全体を「"」で囲むため、その内部では「"」は使用できず代わりに「'」を使用しています。

イベントハンドラをプロパティとして設定

イベントハンドラは、オブジェクトのプロパティとして設定することもできます。下記のように書きます。

　オブジェクト名.イベントハンドラ = 呼び出す関数名;

1	オブジェクト名.イベントハンドラ = 呼び出す関数名;

関数名の後ろには「( )」を書くことはできません。関数をオブジェクトとして扱うからです。サンプルコードでは、onloadイベントハンドラから、init関数を呼び出すように設定しています。

　window.onload = init;

1	window.onload = init;

onloadイベントハンドラ

onloadとは、windowオブジェクトに用意されているイベントハンドラで、HTMLドキュメントの読み込みが完了したときに呼び出されます。主に変数の初期化のために使われるイベントハンドラです。

今回は、呼び出されたinit関数で、ダイアログボックスを表示しています。

他のイベントハンドラ

これまでの書いてきたonclick以外にも、色々なイベントハンドラがあります。ボタンをクリックといったアクションを起こして発生するものだけではなく、onloadのようにWebブラウザから自動的に呼び出されるものもあります。主なイベントハンドラを下記に書いておきます。

イベントハンドラ	イベントが発生するタイミング
onblur	オブジェクトのフォーカスが失った時
onfocus	オブジェクトがフォーカスを得たとき
onclick	オブジェクトがクリックされた時
ondblclick	オブジェクトがダブルクリックされた時
onmousedown	マウスボタンを押したとき(クリックの前半の動作)
onmouseup	マウスボタンを離したとき(クリックの後半の動作)
onmousemove	マウスボタンを動かしたとき
onchange	テキストフィールドなどのテキスト内容が変更されたとき
onsubmit	フォームが送信された時
onmouseover	オブジェクトの中にマウスが入ったとき
onmouseout	オブジェクトからマウスが出たとき
onload	HTMLドキュメントが読み込まれたとき
onunload	HTMLドキュメントが切り替わったとき
onabort	イメージのロードが途中で中止になったとき
onreset	フォームをリセットしたとき
onerror	なにかエラーが起きたとき
onselect	テキストが選択された時