Javascript

【Javascript】イベントハンドラをHTMLから分離 onclick ondblclick

Javascript関連情報

更新日：2005年03月31日

イベントハンドラをHTMLから分離 onclick ondblclick

高橋登史朗

これまで、インラインのイベントハンドラをHTMLから切り離す方法を紹介してきましたが、好評でしたので、もう少しだけ掘り下げてみたいと思います。今回は、onclick, ondblclickです。

動作ブラウザ

win				mac				linux
n7	m1	e6	o7	n7	m1	e5	s1	n7	m1	k3
○	○	○	○	○	○	○	○	○	○	○

*n4でも動作します。

これまで、インラインのイベントハンドラをHTMLから切り離す方法を紹介してきましたが、好評でしたので、もう少しだけ掘り下げてみたいと思います。

前回までは、主に、INPUTタグのonclickイベントに限って確認してきました。そこで、今回からは、それ以外のHTMLタグ(要素)やイベントについても目を配っていきます。

しかし、使えるイベントはHTMLのタグ(要素)毎に異なっていますから、すべてを確認すると膨大な量になってしまします。また、ブラウザ毎に異なる拡張されたイベントも大量にあります。

そこで、ここでは、とりあえず大半のブラウザにおおむね共通して動作するHTML 4.01のイベント仕様に従い、タグ(要素)も限定しつつ、以下のイベントについて順次確認してみたいと思います(もちろん、もし希望が多ければ、将来試しても良いですが、、、)。

今回以降扱うイベントは次の通りで、今回は、onclick, ondblclickです。 onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

1: イベント用の.js外部ライブラリを用意する

2: DIV要素へonclickイベントをセットする

3: IMG要素へonclickイベントをセットする

4: DIV要素へondblclickイベントをセットする

5: IMG要素へondblclickイベントをセットする

1: イベント用の.js外部ライブラリを用意する

まず、前回利用したクロスブラウザのイベント関数 startEvent()とstopEvent() をライブラリとして.jsファイル化します。

また、上記関数の引数である「対象オブジェクト名」を指定する際に、クロスブラウザで取得するための関数 getLayOjStr()もセットにして、一つのファイルに入れておきます。

これにより、今回のサンプル群のように、何度も利用する際には、該当関数群が 1行で済むようになり、ライブラリアップデート時も1ファイルの修正で済みますから便利になります。

//====================================================================
// jsライブラリ
// イベント関連 jslb_event.js 
// 
//
// 2005/03/30 ( Use Free 商用利用も自由です )
//--------------------------------------------------------------------
//--イベントキャプチャ開始関数 
// 書式 startEvent('対象オブジェクト名','イベントタイプ名','動作する関数')
// 例   startEvent("document.getElementById('test')","click","doFunc")
// http://allabout.co.jp/internet/javascript/closeup/CU20030920/index.htm
//--イベントキャプチャ停止関数 
// 書式 stopEvent('対象オブジェクト名','イベントタイプ名')
// 例   stopEvent("document","mousemove")
// http://allabout.co.jp/internet/javascript/closeup/CU20030922/index.htm
//--対象オブジェクト名を取得
// 書式 getLayOjStr(id名)
// 例   testojstr = getLayOjStr("test")
// 戻値 対象オブジェクトのdocument以下の名前
//   (例 "document.getElementById('test')"や"document.layers['test'])"
// http://jsgt.org/mt/archives/01/000186.html
//--------------------------------------------------------------------
// Toshirou Takahashi/サポート http://jsgt.org/mt/01/
//--------------------------------------------------------------------
/*

使用例:  ページ読み込み時にid="test"のDIVへonclickイベントを追加する

  <script language = "JavaScript" 
         charset = "Shift_JIS"
         src     = "./jslb_event.js"></script>

  <script language="JavaScript">
  <!--
    //クリック時に動作する関数
    function forTest(){ alert('clicked!') }
  //-->
  </script>

  <body onload="startEvent(getLayOjStr('test'),'click','forTest')">

  <div id="test">test</div>

*/
//--------------------------------------------------------------------

   //--イベント開始関数    function startEvent(ojNameStr,eventTypeNameStr,funcNameStr){     //n4,m1,n7,e4,e5,e6,o6,o7,s1,k3用     eval(ojNameStr+".on"+eventTypeNameStr+"="+ funcNameStr)     //n4用     if(document.layers)       eval(ojNameStr+".captureEvents(Event."                  +eventTypeNameStr.toUpperCase()+")")   }      //--イベント停止関数    function stopEvent(ojNameStr,eventNameStr){     //n4,m1,n7,e4,e5,e6,o6,07,s1,k3用     eval(ojNameStr+".on"+eventNameStr+" = null")     //n4用     if(document.layers)       eval(ojNameStr+".releaseEvents(Event."                  +eventNameStr.toUpperCase()+")")    }    //--対象オブジェクト名を取得   //  (必ずonload後に実行すること)   function getLayOjStr(idName){     if(document.getElementById)         //e5,e6,n6,n7,m1,o6,o7,s1用       return "document.getElementById('"+idName+"')"     else if(document.all)               //e4用       return "document.all('"+idName+"')"     else if(document.layers)            //n4用       return "document.layers['"+idName+"']"   } 
//--------------------------------------------------------------------

まず、上記のスクリプトを jslb_event.jsという名前で保存しておきます。

次に、使用したいHTML内へ、たとえば、下記のように書いて呼び出せば、使えるようになります。

  <script language = "JavaScript" 
          charset  = "Shift_JIS"
          src      = "./jslb_event.js"></script>

charset = "Shift_JIS" の部分は jslb_event.js の文字コードをShift_JISで書いた場合の書き方で、もしEUC-JPなら charset = "EUC-JP" 、UTF-8なら charset = "UTF-8" と書き換えてください。

これによって、jslb_event.js側の文字コードと、利用するHTML側の文字コードが異なっても、文字化けせずに使えるようになります。

では、次に、これを利用したサンプルをみていきましょう。

　* イベント追加と削除のクロスブラウザ関数については以前の「クロスブラウザを制する」シリーズイベント開始とイベント停止で触れていますので、そちらをご覧ください。DOMでは、addEventListener()やremoveEventListener()という同様のメソッドが用意されていますが、IEがサポートしていないなどクロスブラウザ的に難があるため、用意した関数です。

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！