DOMの要素とクラスとを対応付けたい場合のイベントハンドラの扱い方.
・Hogeクラスを,クラス属性値hogeのdiv要素(以下hoge要素)と対応付けたい
・Hogeクラスのインスタンスメソッドonmousedownを,hoge要素のonmousedownイベントハンドラと対応付けたい
// Constructor function Hoge(_fuga){ var _elm = document.createElement('div'); _elm.setAttribute("class", 'hoge'); this.elm = _elm; this.fuga = _fuga; } // Initializer // インスタンスを作成,インスタンスメソッドをDOMイベントにバインドし, // インスタンスを返すクラスメソッド. // DOMイベントハンドラからはthis.fugaでインスタンスのプロパティに // アクセスできないので,クロージャを用いる. Hoge.initializer = function(_fuga){ var instance = new Hoge(_fuga); instance.elm.onmousedown = function(e){ // Hoge.prototype.onmousedownを継承した // インスタンスメソッドonmousedownを呼び出す instance.onmousedown(e); }; return instance; }; Hoge.prototype.onmousedown = function (e){ this.fuga = 'fugafuga'; }; // var obj = new Hoge('fuga'); の代わりに以下を使う var obj = Hoge.initializer('fuga'); // hoge要素の上でmousedownすると,obj.fugaの値が'fugafuga'になる.
あまり可愛くないけど,こうするしかないかな.
イベントハンドラじゃなくてイベントリスナを使う場合もほとんど同じなので割愛.