EventTarget.addEventListenerを使用して登録されたイベントリスナーを削除します。 EventTarget.addEventListenerを使用して登録されたイベントリスナーを削除します。

• 文法
• サンプル
• 注意事項
• ブラウザの互換性
• 関連項目
• 仕様
• 古いブラウザのサポート(Polyfill)

文法

target.removeEventListener(type, listener[, useCapture])

引数	説明
type	型：string 削除するイベントの型を表す文字列を指定します。
listener	型：2 初期値：3 削除するEventListener関数を指定します。
[useCapture]	型：boolean 初期値：false 削除されるEventListenerがキャプチャリスナーとして登録されていたか否かを指定します。 指定されない場合、デフォルトのfalseが適用されます。 もしリスナーが、1つはキャプチャとして、もう1つはそうでは無いものとして2度登録された場合、 それぞれ別々に削除しなければいけません。 キャプチャリスナーの除去は、同じリスナーのキャプチャを使用しない方に作用することは無く、 逆もまた然りです。

注意: useCaptureは例えばFirefox6以降のような、 主要なブラウザの比較的新しいバージョンで任意指定の引数になりました。 幅広くバージョンの互換性をサポートする必要があるのであれば、この引数を指定する必要があります。

サンプル

もし、イベント処理中にEventTargetから、 EventListenerが削除されると、 その実行中のアクションでトリガされません。 削除後は、EventListenerは実行されなくなります。

EventTargetに登録されているEventListenerを識別出来ない引数が指定された場合、 removeEventListener()は何もしません。

注意事項

下記はイベントリスナーを追加し、その後削除する例になります。

var div = document.getElementById('div');
var listener = function (event) {
  /* ここで何かします */
};
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);

ブラウザの互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	1.0	1.0 (1.7 or earlier)	9.0	7	1.0
useCapture指定が 任意	◯	6.0	9.0	(12.00)	◯

モバイル

機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	1.0	1.0 (1)	9.0	6.0	1.0
useCapture指定が 任意	?		?	?	?	?

Geckoでの注意事項

• Firefox 6より前のバージョンでは、もしuseCapture引数に明示的にfalseが指定されていなければ、 例外がスローされます。 Gecko 9.0(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)より前のバージョンでは、 addEventListener()はリスナーの引数がnullだと例外をスローしますが、 現在ではメソッドはエラーをエラーを返さず、何も行いません。

Operaでの注意事項

• Opera 12.00で、useCapture引数は省略可になります。 (情報源)

WebKitでの注意事項

• WebkitでuseCapture引数が明示的に省略可になったのは2011年6月ですが、 それ以前から動作していました。 この変更は、Safari5.1とChrome13で実装されました。

関連項目

• EventTarget.addEventListener()

仕様

• removeEventListener

古いブラウザのサポート(Polyfill)

addEventListener()とremoveEventListener()は古いブラウザでは提供されていません。 あなたのスクリプトの始めに下記の興味深いコードを置くことで、 これらがサポートされないブラウザでaddEventListener()とremoveEventListener()を使用可能にします。

if (!Element.prototype.addEventListener) {
  var oListeners = {};
  function runListeners(oEvent) {
    if (!oEvent) { oEvent = window.event; }
    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
      if (oEvtListeners.aEls[iElId] === this) {
        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
        break;
      }
    }
  }
  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
    if (oListeners.hasOwnProperty(sEventType)) {
      var oEvtListeners = oListeners[sEventType];
      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
      }
      if (nElIdx === -1) {
        oEvtListeners.aEls.push(this);
        oEvtListeners.aEvts.push([fListener]);
        this["on" + sEventType] = runListeners;
      } else {
        var aElListeners = oEvtListeners.aEvts[nElIdx];
        if (this["on" + sEventType] !== runListeners) {
          aElListeners.splice(0);
          this["on" + sEventType] = runListeners;
        }
        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
          if (aElListeners[iLstId] === fListener) { return; }
        }
        aElListeners.push(fListener);
      }
    } else {
      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
      this["on" + sEventType] = runListeners;
    }
  };
  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
    if (!oListeners.hasOwnProperty(sEventType)) { return; }
    var oEvtListeners = oListeners[sEventType];
    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
    }
    if (nElIdx === -1) { return; }
    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
    }
  };
}

 Back to top