prototype.jsでthisとかbindとかキャッシュとか

とあるWEBクリエイターのblog » 技術系 » javascript » prototype.jsでthisとかbindとかキャッシュとか

激しくはまったのでメモ。

hoge.prototype.initialize = function() {
	var div = document.createElement("div");
	div.innerHTML = "hoge";
	this.div_ = div;
	Event.observe( this.div_ , 'mousedown', function(e){
		alert(this.innerHTML);//何が出るかな
	},false)
}

alertはFirefoxだと『hoge』が出力されるけどIEだとundefined。

IEだとthisに何が入ってるか調べようとしたらえらい目にあったわけで。

とりあえずthisになにが入ってるか調べるのはあきらめる。elementかな。

mausedownした際にそのオブジェクトのプロパティも取得したいわけで調べるとbindすればよいらしい。

参考：prototype.jsのbindを理解する

hoge.prototype.initialize = function() {
	var div = document.createElement("div");
	div.innerHTML = "hoge";
	this.div_ = div;
	Event.observe( this.div_ , 'mousedown', this.dragable.bindAsEventListener(this), false );
}
hoge.prototype.dragable(e){
	alert(this.div_.innerHTML)
}

で目的の通りFirefox,IE共に『hoge』が出力される。

複数の要素を一緒が移動できるドラッグアンドドロップの処理を作ってたんだど、

Event.observe( window.document, 'mousemove', this.mouseMoving.bindAsEventListener(this),false)

を

Event.stopObserving( window.document, 'mousemove', this.mouseMoving.bindAsEventListener(this),false)

でイベントを取り消せない。

これまた調べると、

Event.stopObservingが効かない・動作しない・削除できない。

ということで関数を一度変数に入れてキャッシュすればよいらしい。

そもそも、イベントハンドラ=関数という実装が好きじゃないな。

そんな今日この頃。

« 前の記事へ

次の記事へ »