From eb2e6997725a2fcb926699abd942bdc439e8b76f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 30 Jan 2022 18:00:54 +0900 Subject: 2021/12/14 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/eventtarget/removeeventlistener/index.md | 263 +++++++-------------- 1 file changed, 91 insertions(+), 172 deletions(-) (limited to 'files/ja/web/api') diff --git a/files/ja/web/api/eventtarget/removeeventlistener/index.md b/files/ja/web/api/eventtarget/removeeventlistener/index.md index c15c61d051..34fd040860 100644 --- a/files/ja/web/api/eventtarget/removeeventlistener/index.md +++ b/files/ja/web/api/eventtarget/removeeventlistener/index.md @@ -1,220 +1,139 @@ --- -title: EventTarget.removeEventListener +title: EventTarget.removeEventListener() slug: Web/API/EventTarget/removeEventListener tags: - - API - - DOM - - DOM Element Methods - - EventTarget - - Gecko - - Method - - Reference - - browser compatibility - - removeEventListener - メソッド + - リファレンス +browser-compat: api.EventTarget.removeEventListener translation_of: Web/API/EventTarget/removeEventListener --- -
{{APIRef("DOM Events")}}
+{{APIRef("DOM")}} -

EventTarget.removeEventListener() メソッドは、 {{domxref("EventTarget")}} から、以前に {{domxref("EventTarget.addEventListener()")}} で登録されたイベントリスナーを削除します。削除されるイベントリスナーはイベントの型、イベントリスナー関数そのもの、マッチングプロセスに影響を与えるさまざまな任意のオプションを使用して識別します。{{anch("Matching event listeners for removal", "削除するイベントリスナーのマッチング")}} をご覧ください。

+**`removeEventListener()`** は {{domxref("EventTarget")}} インターフェイスのメソッドで、以前に {{domxref("EventTarget.addEventListener()")}} で登録されたイベントリスナーを取り外します。 +取り外されるイベントリスナーはイベントの型、イベントリスナー関数そのもの、照合プロセスに影響を与えるさまざまな任意のオプションを使用して識別します。 +{{anch("取り外すイベントリスナーの照合")}}を参照してください。 -

構文

+`removeEventListener()` を呼び出したときの引数で `EventTarget` に登録されている {{domxref("EventListener")}} が特定できなかった場合は、何も起こりません。 -
target.removeEventListener(type, listener[, options]);
-target.removeEventListener(type, listener[, useCapture]);
+{{domxref("EventListener")}} が {{domxref("EventTarget")}} の他のリスナーのイベント処理中に外された場合、イベントによって起動させることはありません。しかし、再接続は可能です。 -

引数

+> **Warning:** リスナーが _capture_ フラグを設定したものと設定しないものの 2 つ登録されている場合、それぞれを別々に取り外す必要があります。キャプチャするリスナーを取り外しても、同じリスナーのキャプチャしないバージョンには影響しませんし、その逆も同様です。 -
-
type
-
イベントリスナーを削除するイベントの型を表す文字列。
-
listener
-
イベントターゲットから削除するイベントハンドラーの {{domxref("EventListener")}} 関数です。
-
options {{optional_inline}}
-
イベントリスナーに関する特性を指定する、オプションのオブジェクトです。次のオプションが使用できます。 -
    -
  • capture: この型のイベントが、DOM ツリーで下位にある任意の EventTarget へ発送される前に listener へ発送されることを示す {{jsxref("Boolean")}} です。
    • -
  • {{non-standard_inline}} mozSystemGroup: XBL または Firefox の chrome で実行するコードに限り有効であり、リスナーがシステムグループに追加されているかを定義する {{jsxref("Boolean")}} です。
    • -
-
-
useCapture {{optional_inline}}
-
削除する {{domxref("EventListener")}} がキャプチャーリスナーとして登録されているかを指定します。この引数を省略した場合は、既定値の false であるとみなします。
-
リスナーが 2 回登録されていてひとつはキャプチャー、もうひとつは非キャプチャーである場合は、それぞれを個別に削除します。キャプチャーリスナーを削除しても、同じリスナーの非キャプチャーリスナーには影響がありません。逆も同様です。
-
+イベントリスナーを取り外すには、 {{domxref("AbortSignal")}} を {{domxref("EventTarget/addEventListener()", "addEventListener()")}} に渡して、後でそのシグナルを所有するコントローラーで {{domxref("AbortController/abort()", "abort()")}} を呼び出して行うことも可能です。 -

返値

+## 構文 -

undefined です。

+```js +removeEventListener(type, listener); +removeEventListener(type, listener, options); +removeEventListener(type, listener, useCapture); +``` -

削除するイベントリスナーのマッチング

+### 引数 -

{{domxref("EventTarget.addEventListener", "addEventListener()")}} を呼び出して以前に追加したイベントリスナーは、最終的に削除が必要な状態になることがあります。removeEventListener() に同じ type および listener の引数を指定しなければならないことは明らかですが、options や useCapture の引数はどうでしょうか?

+- `type` + - : 文字列で、イベントリスナーを取り外すイベントの種類を表します。 +- `listener` + - : イベントターゲットから取り外すイベントハンドラーの {{domxref("EventListener")}} 関数です。 +- `options` {{optional_inline}} + - : イベントリスナーに関する特性を指定する、オプションのオブジェクトです。 -

addEventListener() は、オプションが異なっていれば同じ型に対して同じリスナーを複数追加できますが、 removeEventListener() が確認するオプションは capture/useCapture フラグだけです。一致させるためにこの値は removeEventListener() で一致していなければなりませんが、他の値は一致していなくてもかまいません。

+ 次のオプションが使用できます。 -

例えば、以下の addEventListener() で考えましょう。

+ - `capture`: 論理値で、取り外す {{domxref("EventListener")}} がキャプチャリスナーとして登録されているか否かを指定します。この引数がない場合、既定の値として `false` が想定される。 -
element.addEventListener("mousedown", handleMouseDown, true);
+- `useCapture` {{optional_inline}} + - : 取り外す {{domxref("EventListener")}} がキャプチャリスナーとして登録されているかを指定します。この引数を省略した場合は、既定値の `false` であるとみなします。 -

そして、以下 2 つの removeEventListener() の呼び出しについて考えましょう。

+### 返値 -
element.removeEventListener("mousedown", handleMouseDown, false);     // 失敗
+なし。
+
+### 取り外すイベントリスナーの照合
+
+以前に {{domxref("EventTarget.addEventListener", "addEventListener()")}} を呼び出して追加したイベントリスナーがある場合、最終的にそれを取り外す必要がある場合があります。当然ながら、同じ `type` と `listener` 引数を `removeEventListener()` には指定する必要があります。しかし、 `options` や `useCapture` 引数はどうでしょうか。
+
+`addEventListener()` は、オプションが異なれば同じリスナーを同じ種類に複数回追加することができますが、 `removeEventListener()` がチェックするオプションは `capture`/`useCapture` フラグのみとなります。この値は `removeEventListener()` で一致するためには一致していなければなりませんが、他の値は一致していなくてもかまいません。
+
+例えば、以下の `addEventListener()` で考えましょう。
+
+```js
+element.addEventListener("mousedown", handleMouseDown, true);
+```
+
+そして、以下 2 つの `removeEventListener()` の呼び出しについて考えましょう。
+
+```js
+element.removeEventListener("mousedown", handleMouseDown, false);     // 失敗
 element.removeEventListener("mousedown", handleMouseDown, true);      // 成功
-
+``` + +1 番目の呼び出しは、 `useCapture` の値が異なるため失敗します。2 番目は、`useCapture` が一致するので成功します。 -

1 番目の呼び出しは、useCapture の値が異なるため失敗します。2 番目は、useCapture が一致しますので成功します。

+次に、以下の呼び出しを考えましょう。 -

次に、以下の呼び出しを考えましょう。

+```js +element.addEventListener("mousedown", handleMouseDown, { passive: true }); +``` -
element.addEventListener("mousedown", handleMouseDown, { passive: true });
+ここでは `options` で `passive` を `true` に設定して指定していますが、他のオプションは既定値の `false` のままです。 -

ここでは passive を true に設定した options を指定していますが、他のオプションは既定値の false のままです。

+では、以下の `removeEventListener()` の呼び出しについて、順番に見ていきましょう。`capture` または `useCapture` が `true` であるものは失敗して、そのほかは成功します。 -

では、以下の removeEventListener() の呼び出しについて、順番に見ていきましょう。capture または useCapture が true であるものは失敗して、そのほかは成功します。capture の設定だけが removeEventListener() に関与します。

+`capture` の設定だけが `removeEventListener()` に関与します。 -
element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // 成功
+```js
+element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // 成功
 element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // 成功
 element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // 失敗
 element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // 成功
 element.removeEventListener("mousedown", handleMouseDown, false);                 // 成功
 element.removeEventListener("mousedown", handleMouseDown, true);                  // 失敗
-
- -

一部のブラウザーはこれとは動作が異なることは注目する価値があり、他に特別な理由がない限り removeEventListener() を呼び出すときは、addEventListener() を呼び出したときと同じ値を使用するとよいでしょう。

- -

メモ

+``` -

{{domxref("EventListener")}} がイベントを処理中である {{domxref("EventTarget")}} から削除された場合、現在のアクションによってそのイベントリスナーが実行されることはありません。{{domxref("EventListener")}} は、決して削除された後に実行されることはありません。ただし、再追加することができます。

+この点については、いくつかのブラウザのリリースで一貫性がないことに注意してください。特に理由がない限り、`addEventListener()` の呼び出しで使用したのと同じ値を `removeEventListener()` の呼び出しでも使用することが賢明でしょう。 -

EventTarget 上にある現在のどの {{domxref("EventListener")}} も指定していない引数付きの removeEventListener() は、何の効果もありません。

+## 例 -

例

+この例は、`mouseover` ベースのイベントリスナーを追加して `click` ベースのイベントリスナーを取り外す方法を示します。 -

この例は、click ベースのイベントリスナーを追加して mouseover ベースのイベントリスナーを削除する方法を示します。

- -
var body = document.querySelector('body'),
-    clickTarget = document.getElementById('click-target'),
-    mouseOverTarget = document.getElementById('mouse-over-target'),
-    toggle = false;
+```js
+const body = document.querySelector('body')
+const clickTarget = document.getElementById('click-target')
+const mouseOverTarget = document.getElementById('mouse-over-target')
 
+let toggle = false;
 function makeBackgroundYellow() {
-    'use strict';
-
-    if (toggle) {
-        body.style.backgroundColor = 'white';
-    } else {
-        body.style.backgroundColor = 'yellow';
-    }
+  if (toggle) {
+    body.style.backgroundColor = 'white';
+  } else {
+    body.style.backgroundColor = 'yellow';
+  }
 
-    toggle = !toggle;
+  toggle = !toggle;
 }
 
 clickTarget.addEventListener('click',
-    makeBackgroundYellow,
-    false
+  makeBackgroundYellow,
+  false
 );
 
 mouseOverTarget.addEventListener('mouseover', function () {
-    'use strict';
-
-    clickTarget.removeEventListener('click',
-        makeBackgroundYellow,
-        false
-    );
+  clickTarget.removeEventListener('click',
+    makeBackgroundYellow,
+    false
+  );
 });
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}{{Spec2("DOM2 Events")}}初回定義
- -

ブラウザーの対応

- -
{{Compat("api.EventTarget.removeEventListener", 3)}}
- -

古いブラウザーをサポートするためのポリフィル

- -

addEventListener() および removeEventListener() は、古いブラウザーでは提供されていません。以下のコードをスクリプトの先頭に挿入するとこの問題を回避でき、 addEventListener() および removeEventListener() にネイティブに対応していない実装でもこれらを使用できます。ただし、 Element.prototype が Internet Explorer 8 までサポートされていなかったため、この方法は Internet Explorer 7 およびそれ以前では動作しません。

- -
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); }
-    }
-  };
-}
-
+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -

関連情報

+## 関連情報 - +- {{domxref("EventTarget.addEventListener()")}} -- cgit v1.2.3-54-g00ecf