解 説

JavaScriptはイベントドリブンモデルのプログラムです。
それは、あるイベント(ページロード、マウスクリック、テキストボックスの内容が変更されたなど)に応じて実行するコードを記述することです。

DOMレベル0のイベントモデル

JavaScript初期の頃のイベントハンドラの設定方法です。

イベントタイプ

イベントハンドラの種類
分類 イベントハンドラ 発生タイミング 主な対象要素
読み込み onabort 画像の読み込みが中断されたとき img
onload ページ、画像の読み込みが完了したとき body,img
onunload 他ページに移動するとき body
マウス onclick マウスクリック  
ondbclick ダブルクリック  
onmousedown

マウスボタン押下時

 
onmousemove マウスボタン移動時  
onmouseout 要素からマウスボタンが外れたとき  
onmouseover 要素にマウスボタンが重なったとき  
onmouseup マウスボタンを離したとき  
contextmenu コンテキストメニューが表示されたとき body
キー onkeydown キーを押下したとき  
onkeypress キーを押下中  
onkeyup キーを離したとき  
フォーム onchange 内容が変更されたとき input(text),select
onreset リセットボタンが押されたとき form
onsubmit サブミットボタンが押されたとき form
フォーカス onblur 要素からフォーカスが離れたとき  
onfocus 要素がフォーカスされたとき  
その他 onresize 要素のサイズを変更したとき  
onscroll スクロールしたとき body

イベントとイベントハンドラの関連付け

JavaScriptでのイベントとイベントハンドラの関連付けのポイントは次のようになります。

  • イベントを発生する要素
  • イベントの種類
  • イベントで実行する命令
  • イベントの関連付け

HTMLの属性を利用した方法

イベント属性とは、スクリプトを利用する際に、ユーザの反応に対して動作する属性のことです。これをイベントハンドラとして使用することです。

簡単な例 アラートの表示
ボタンをクリックしたらアラートが表示されます。
サンプル

この例はonclickイベントハンドラとbtn_click()関数を関連付けしてアラートを表示させています。
そしてこの記述はinput要素の属性としてonclickを記述しています。
つまりイベントハンドラ属性の値としてalert表示の命令をする関数の記述をしているわけです。

イベントハンドラ属性の記述は大文字でも小文字でもHTMLの規則に従うので可能ですが、onClickなどとする場合が多かったです。けれどもxhtmlが一般的になるとxhtmlの規則に従い全て小文字が使用されるようになっています。

イベントハンドラ属性を使用する場合はmeta要素に次の記述を入れておきましょう。

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

イベントハンドラのみとはいえ、JavaScriptをbodyの中に書くのは好ましくありません。
そこでDOM0を利用します。
documentオブジェクトを指定してそのプロパティを設定します。
注意点としてJavaScriptはHTMLが全て読み込まれてから実行されなければなりません。
最近よく使用される方法としてbodyタグの終了タグの直前に記述する方法など使用します。
もちろんonloadを使用することもOKです。
プロパティとしてイベントハンドラを設定する場合はすべて小文字で記述しなければなりません。なぜならこれはHTMLの属性ではないからです。