目次

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

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

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

実は、各要素のオブジェクトには、予めイベントメソッドが用意されています。そして、そのデフォルトの処理を任意の処理でオーバーライドすることにより、イベントに対していろいろな処理を実行することが可能です。

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

イベントメソッドオーバーライド(イベントハンドラの定義)

オブジェクト名.イベントメソッド名 = 関数名;
     obj.onmouseover = func1; (んな感じ。)

尚、イベントメソッド名はイベント属性名と同様になります。

サンプル

以下のサンプルは、マウスオーバーやクリックで要素のクラス属性を各々置き換えマウスアウトで元に戻しています。

onmouseoverでclass1を、onclickでclass2を、onmouseoutで元に戻しています。

サンプルソース
//以下は、head要素内へ記述する
<style type="text/css">
<!--
.class1 {
 text-decoration: underline;
 background-color: blue;
 color: #FFFFFF;
}
.class2 {
 text-decoration: line-through;
 background-color: green;
 color: #FFFFFF;
}
-->
</style>

//以下は、body要素内に記述する
<div>
<p id="test1">
onmouseoverでclass1を、onclickでclass2を、onmouseoutで元に戻しています。
</p>
</div>
<script type="text/javascript">
<!--
      obj = document.getElementById("test1");
      obj.onmouseover = func1;   //onmouseoverのイベントハンドラをオーバーライド
      obj.onclick = func2;       //onclickのイベントハンドラをオーバーライド
      obj.onmouseout = func3;    //onmouseoutのイベントハンドラをオーバーライド
      
      function func1(){          //オーバーライドするonmouseoverメソッド
         this.className="class1";
      }
      function func2(){          //オーバーライドするonclickメソッド
         this.className="class2";
      }
      function func3(){          //オーバーライドするonmouseoutメソッド
         this.className="";
      }
// -->
</script>

尚、オーバーライドでなく「イベント属性にイベントハンドラを指定する適用方法」による上記と同様なサンプルはDOMによるスタイルの変更(その2)あります。比べてみてください!

補足

getElementByIdメソッド、classNameプロパティ等がわからない人は、DOMによるスタイルの変更(その2)の周辺を参照のこと。

また、設定できるイベントの種類は「汎用属性とイベント属性」を参照のこと。

あと、「実は、各要素のオブジェクトには、予めイベントメソッドが用意されています。」は、例のfor( i in obj )で確認でき、この文をクリックするとfor( i in obj )が実行され確認できます。

目次