6. addEventListenerの浮気

<pre> <next>
二つのサンプルコードの違いは以下の通りです。二つのウィンドウにそれぞれのサンプルコードを左右に並べて表示してじっくりと比較してみてください。

サンプルコード１
myObject.addEventListener('mousedown', function(e) { self.myHandler(e) }, false);

サンプルコード２
myObject.addEventListener('mousedown', this.myHandler, false);

サンプルコード２が一般的によく紹介されている書き方です。this.myHandlerは生成されたオブジェクトのmyHandler関数です。サンプルコード１ではfunction(e)でハンドラを定義しています。分かりやすいように改行を入れると以下のようになります。

　　myObject.addEventListener(
　　　　'mousedown', 
　　　　function(e) { 
　　　　　　self.myHandler(e) 
　　　　}, 
　　　　false
　　);

ここは関数定義の中ですので、ここでthisを使えば新規の関数定義となります。そこでコンストラクタ内のthisをselfに入れてself.myHandler(e)とすることでオブジェクト内のmyHandlerメソッドを指しています。

なぜこのような面倒な事をしているのでしょう？また、この後のthis.myObject = myObject;という式も妙です。さらに、もう一つ気になるのは謎の引数eの存在です。実はthisがこの一件に強く絡んでいるのですが・・・三文探偵小説なら事件はいよいよ混迷を深めてきたというところでしょうか（苦笑）
<pre> <next>