イベントの削除

イベントを削除するには、element.removeEventListenerメソッド(IE8以下の場合はelement.detachEventメソッド)を使用します。

構文

element.removeEventListener(type, listener[, use capture]);

IE8以下の場合

element.detachEvent(type, listener);
引数名 初期値 説明
第一引数
必須
type string   削除するイベント名
第二引数
必須
listener function   削除する機能(関数)
第三引数 use capture boolean|object false ユーザがキャプチャを開始したいことを示す
  • ※ 第二引数で指定する関数は、addEventListener(IEではattachEvent)メソッドで指定した関数と同じものを指定する必要があります。

なおdetachEventの場合、thisは自分自身ではなくwindowオブジェクトになります。
自分自身を得るには、引数のオブジェクトにあるsrcElementで取得します。

JavaScript

document.getElementById('sample').detachEvent('click', function(event) {
	var self = (event.srcElement) ? event.srcElement : this;
	...
});

共通関数としての定義

分岐処理をした関数を用意することで、removeEventListenerとdetachEventの両方を別で書かずにすむようになります。

関数定義

JavaScript

var removeEvent = (function() {
	if (window.removeEventListener) {
		return function(element, type, handler) {
			// other
			element.removeEventListener(type, handler, false);
			return element;
		};
	} else if (window.detachEvent) {
		return function(element, type, handler) {
			// IE
			element.detachEvent('on' + type, handler);
			return element;
		};
	} else {
		return function(element) {
			return element;
		};
	}
})();

使い方

第一引数にエレメント(ノード)、第二引数にイベント名、第三引数にfunctionを指定します。

JavaScript

var onLoadHandle = function() {
	alert('onload');
};

// removeEvent(オブジェクト, タイプ, 実行function);
removeEvent(window, 'load', onLoadHandle);

JavaScript逆引きリファレンス一覧へ戻る