目次

オブジェクトなJavaScriptの基礎講座

イベント処理

◆ はじめに

フォームのボタンのクリック時やリンクテキストの上をマウスが通過した時など、ブラウザ内部に各々のイベントが発生します。

JavaScriptはそのイベントの対して任意の処理をブラウザ上ですることができます。以下に各々のイベントに対しての適用方法についてご説明致します。

尚、イベントハンドラの設置方法は2つあり、各要素のイベント属性にイベントハンドラ(イベント発生時に実行する関数)を指定する方法各要素のイベントメソッドにイベントハンドラをオーバーライドする方法です。

イベント属性
要素の属性の一種。「汎用属性とイベント属性」を参照のこと。
イベントハンドラ
要素にたいして、マウスクリック等のイベントが発生した時に、実行される関数。
イベントメソッド
各要素には、いろいろなイベントが発生した時に、それに対応して実行される、そして、予め用意されているメソッド。しかし、任意の処理をするときは、イベントハンドラをイベントメソッドへオーバーライドします。

◆ イベント属性にイベントハンドラを指定する適用方法

各要素のイベント属性にイベントハンドラを設定することにより、該当要素に該当イベントが発生すると該当イベントハンドラが実行されます。

  1. onAbort : イメージのロードが中止されたとき
  2. onBlur : フォーカスを失ったとき
  3. onChange : 値が変化したとき
  4. onClick : クリックしたとき
  5. onError : エラーが起こったとき
  6. onFocus : フォーカスを受けたとき
  7. onLoad : ページがロードされたとき
  8. onMouseOut :マウスがオブジェクトからでたとき
  9. onMouseOver:マウスがオブジェクトを通過したとき
  10. onReset :フォームをリセットしたとき
  11. onSelect :テキストが選択されたとき
  12. onSubmit :Submitボタンがクリックさてたとき
  13. onUnload :ページがアンロード されたとき

◆ イベントメソッドにイベントハンドラをオーバーライドする適用方法

各要素のイベントメソッドにイベントハンドラをオーバーライドすることにより、該当要素に該当イベントが発生すると該当イベントメソッドが起動されます。

  1. イベントハンドラオーバーライド適用方法

目次