イベントの削除
イベントを削除するには、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);