スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[Javascript]jQueryでイベントを処理するときのthis

イベントリスナー中でのthisが指すものが異なるため、どうしたものかと悩んだのでメモしておきます。

prototype.jsならbindAsEventListenerを使用すると解決できるのですが。

div要素内にa要素を追加し、クリックされたらクラス内の変数mynameを表示するサンプルです。

/* sample0 */
$(function(){
  var myobj = new MyClass();
  myobj.create();
});

var MyClass = function(){
  this.myname = 'MyClass';
};
MyClass.prototype = {
  create:function(){
    $('div.target').append(
      $('<a>').text('Click').attr('href', 'javascript:;')
        .click(this.onClick)
    );
  },
  onClick:function(e){
    alert(this.myname);
  }
}


この例では、onClick内でのthisはMyClassインスタンスを指さないため「undefined」と表示されます。

/* sample1 目的のタグに必要な情報は埋めておく */
var MyClass = function(){
  this.myname = 'MyClass';
};
MyClass.prototype = {
  create:function(){
    $('div.target').append(
      $('<a>').text('Click').attr('href', 'javascript:;')
        .attr('myname', this.myname)
        .click(this.onClick)
    );
  },
  onClick:function(e){
    alert($(e.target).attr('myname'));
  }
}


タグに色々情報を持たせるのは少々抵抗があります…

/* sample2 イベント登録時に渡す引数を指定しておく */
var MyClass = function(){
  this.myname = 'MyClass';
};
MyClass.prototype = {
  create:function(){
    $('div.target').append(
      $('<a>').text('Click').attr('href', 'javascript:;')
    );
    $('div.target a').bind('click', {'myname':this.myname}, this.onClick);
  },
  onClick:function(e){
    alert(e.data.myname);
  }
}


$.ajaxを使用する場合は、オプションの中にこっそり潜ませておくような感じでしょうか。

/* sample3 windowオブジェクト内に専用領域を確保する */
var MyClass = function(){
  this.myname = 'MyClass';
  window.myclass = this;
};
MyClass.prototype = {
  create:function(){
    $('div.target').append(
      $('<a>').text('Click').attr('href', 'javascript:;')
        .click(this.onClick)
    );
  },
  onClick:function(e){
    alert(window.myclass.myname);
  }
}


いっそのこと、windowオブジェクト内に持たせてしまう方法です。
複数インスタンスを生成したい場合には困りそうです。

/* sample4 thisを引数として渡す */
var MyClass = function(){
  this.myname = 'MyClass';
};
MyClass.prototype = {
  create:function(){
    var self = this;
    $('div.target').append(
      $('<a>').text('Click').attr('href', 'javascript:;')
        .click(function(e){ return self.onClick(e, self); })
    );
  },
  onClick:function(e, self){
    alert(self.myname);
  }
}


こちらは、イベントリスナーの引数としてthisを渡す方法です。


個人的にはsample4の方法がしっくりきます。

コメントの投稿

非公開コメント

プロフィール

jou4

Author:jou4
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。