へぼいいいわけ このページをアンテナに追加 RSSフィード Twitter

2008年11月01日

JavaScriptのイベント登録と取り消しの簡略化

addEventListenerで渡した無名関数の中でremoveEventListenerする

↑を見てイベントを登録するときに、ついでに削除も指定できるような気がしたので形にしてみました。

// イベント登録と削除
var addEvent = (function(){
	if(document.addEventListener){
		// IE以外
		return function(elm, type, func){
			elm.addEventListener(type, function(e){
				if(func(e)) elm.removeEventListener(type, arguments.callee, false);
			}, false);
		}
	} else if(document.attachEvent){
		// IE用
		return function(elm, type, func){
			type = 'on' + type;
			elm.attachEvent(type, function(e){
				if(func(e)) elm.detachEvent(type, arguments.callee);
			});
		}
	} else {
		// ひねくれたブラウザ用
		return function(elm, type, func){
			type = 'on' + type;
			elm[type] = function(e){
				if(func(e)) elm[type] = null;
			}
		}
	}
})();

// 使い方
addEvent(window, 'load', function(){
	// 消えないイベント
	addEvent(document.getElementById('pop1'), 'click', function(){
		alert('やっほー');
		return false; // 書かなくても動く
	});
	// 一回で消えるイベント
	addEvent(document.getElementById('pop2'), 'click', function(){
		alert('一回だけ');
		return true;
	});
	// イベント分岐
	addEvent(document.getElementById('pop3'), 'click', function(){
		return confirm('イベントを取り消しますか?');
	});
	// loadイベントを削除
	return true;
});

サンプル


簡単な説明

よくあるaddEventListener/attachEventラッパーにイベントを消す機能を付けたものになります。

addEvent関数の第三引数に渡す関数戻り値を見て、trueならイベント消滅、falseならイベント維持するようにしました。

なまえなまえ 2008/11/06 03:45 管理人にメールって届いてない?

heiwabokeheiwaboke 2008/11/07 20:38 届いてますよ。
でも、あんまり見ていません。ごめんなさい。

なまえなまえ 2008/11/08 00:32 削除依頼したので見てください。
無視してるのかと思って失礼なこと書いちゃいました。そこの所はごめんなさい。

heiwabokeheiwaboke 2008/11/08 01:41 確認できる分の削除依頼にはすべて対応しました。
対応が遅くなり申し訳ありません。

なまえなまえ 2008/11/08 21:23 削除ありがとうございました。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/heiwaboke/20081101/1225499264