DOM

：

：

EventTarget.removeEventListener() メソッド

　編集：2022.09.23 by T.A.

[Edge]。→、

EventTarget から、以前に EventTarget.addEventListener() で登録されたイベント リスナーを削除します。

削除されるイベント リスナーはイベントの型、イベント リスナー関数そのもの、マッチングプロセスに影響を与えるさまざまな任意のオプションを使用して識別します。 をご覧ください。

構文
EventTarget.removeEventListener(type,listener[,options])
EventTarget.removeEventListener(type,listener[,useCapture])
EventTarget →EventTarget.addEventListener()
type イベント リスナーを削除するイベントの型を表す文字列。addEventListener で指定したもの。
listener イベント ターゲットから削除するイベント ハンドラーの EventListener 関数です。¶関数の識別名。
options 省略可。オプションを表すオブジェクト。イベント リスナーに関する特性を指定します。
プロパティ説明
capture Boolean。この型のイベントが、DOM ツリーで下位にある任意の EventTarget へ発送される前に listener へ発送されることを示します。
mozSystemGroup 非推奨。Boolean。XBL または Firefox の chrome で実行するコードに限り有効であり、リスナーがシステムグループに追加されているかを定義します。
useCapture 省略可。Boolean。削除する EventListener がキャプチャー リスナーとして登録されているかを指定します。

この引数を省略した場合は、既定値の false であるとみなします。

リスナーが 2 回登録されていてひとつはキャプチャー、もうひとつは非キャプチャーである場合は、それぞれを個別に削除します。キャプチャー リスナーを削除しても、同じリスナーの非キャプチャーリスナーには影響がありません。逆も同様です。

戻り値

undefined です。

¶省く

例

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

var body = document.querySelector('body'),
  clickTarget = document.getElementById('click-target'),
  mouseOverTarget = document.getElementById('mouse-over-target'),
  toggle = false;

function makeBackgroundYellow() {
  'use strict';

  if (toggle) {
    body.style.backgroundColor = 'white';
  } else {
    body.style.backgroundColor = 'yellow';
  }

  toggle = !toggle;
}

clickTarget.addEventListener('click',
  makeBackgroundYellow,
  false
);

mouseOverTarget.addEventListener('mouseover', function () {
  'use strict';

  clickTarget.removeEventListener('click',
    makeBackgroundYellow,
    false
  );
});
2つのイベント処理を割り当てる

HTML： 

<SPAN id=IdSpan>SPAN要素。ここでクリックしてみて</SPAN>

JavaScript： 

function Job(eve){  //クリックされたら処理する関数１：
  let Y=eve.target; //イベントが発生した要素の取得。
  alert('Job()：'+ Y.tagName +'：'+ eve.type); //表示：処理名、タグ名、イベントのタイプ。
}
function Job2(eve){  //クリックされたら処理する関数２：
  let Y=eve.target; //イベントが発生した要素の取得。
  alert('Job2()：'+ Y.tagName +'：'+ eve.type); //表示：処理名、タグ名、イベントのタイプ。
}
IdSpan.addEventListener('click',Job); //SPAN要素にclickイベントにJobが割り当てられる。
IdSpan.addEventListener('click',Job2); //SPAN要素にclickイベントにJob2が割り当てられる。

JavaScript： これを実行するとSPAN要素から Job を外す。 

IdSpan.removeEventListener('click',Job); //SPAN要素にclickイベントのJobが削除される。
イベントの割り当てかたの実験

HTML： 

<SPAN id=IdSpan>SPAN要素。ここでクリックしてみて</SPAN>

JavaScript： 

IdSpan.addEventListener('click',function Job(eve){
  let Y=eve.target;
  alert(Y.tagName +'：'+ eve.type);
}); //SPAN要素にclickイベントにJobが割り当てられる。

JavaScript： これを実行するとSPAN要素から処理を外してみるが… 

IdSpan.removeEventListener('click',function(eve){}); //これで削除を試みたが、
	//記述を変えてもイベントの削除はできなかった。
	//listener は関数名を記述しないとだめなようだ。
テスト