addEventListenerを解除する｜JavaScript

addEventListener()メソッドを設定して後から外したい、すなわち無駄なものを残しておくのは良くないから解除したい場合、一回だけ使うならば第三引数のoptionに{once:true}を追加すると自動的にやれるから簡単だ。それ以外はremoveEventListener()メソッドを使わなくてはならないけど、ただし条件があってどんなaddEventListener()メソッドに対しても機能するわけではないから注意を要する。removeEventListenerが機能するための三つの条件三枚の異なる絵が壁にかけられている

以前に addEventListener() を呼び出して追加したイベントリスナーがある場合、最終的にそれを取り外す必要がある場合があります。当然ながら、同じ type と listener 引数を removeEventListener() には指定する必要があります。しかし、 options や useCapture 引数はどうでしょうか。

addEventListener() は、オプションが異なれば同じリスナーを同じ種類に複数回追加することができますが、 removeEventListener() がチェックするオプションは capture/useCapture フラグのみとなります。この値は removeEventListener() で一致するためには一致していなければなりませんが、他の値は一致していなくてもかまいません。

EventTarget: removeEventListener() メソッド｜MDN Web Docs｜Mozilla

removeEventListenerが機能するための条件は三つある。

第一引数

type：イベントの種類

第二引数

listener：関数かhandleevent()メソッドのオブジェクト

第三引数

option：選択のcaptureかuseCaptureのフラグ

removeEventListenerは引数に纏わる三つの条件が一致したaddEventListenerだけを解除することができる。addEventListenerの必須の引数はtypeとlistenerだけなので、optionが指定されてなければremoveEventListenerにも指定する必要はない。第二引数のlistenerは無名関数では指定することができない厄介なのはaddEventListenerの第二引数のlistenerは無名関数だと指定することができなくてremoveEventListenerを使うことができなくなる。無名関数は名前で判別することができないので、関数の内容を同じにしてやってみてもremoveEventListenerは動かないんだ。removeEventListenerで後から解除したいaddEventListenerの第二引数を関数にする場合は前以て一意の名前を付けたものを使うようにしなくては行けない。removeEventListener()メソッドの基本的なプログラム大きな山から麓へ川が流れている

第二引数が関数かhandleevent()メソッドのオブジェクトかで、removeEventListener()メソッドのプログラムは変わる。addEventListenerの関数にどう合わせるかサンプルボタン押すと一回目だけ「あいうえお」というアラートが出て二回目以降は何も起こらない。HTML

<button id="basic1" type="button">ボタン</button>

JavaScript

const btn1 = document.querySelector("button#basic1");
function bf1() {
alert("あいうえお"); btn1.removeEventListener("click", bf1, false); } 
btn1.addEventListener("click", bf1, false);

removeEventListenerの第二引数にはaddEventListenerと同一の関数名を入れる。addEventListenerのhandleevent()メソッドのオブジェクトにどう合わせるかサンプルボタン押すと一回目だけ「アイウエオ」というアラートが出て二回目以降は何も起こらない。HTML

<button id="basic2" type="button">ボタン</button>

JavaScript

const btn2 = document.querySelector("button#basic2");
function bf2() {
alert("アイウエオ"); btn2.removeEventListener("click", this, false); } 
btn2.addEventListener("click", {handleEvent:bf2}, false);

removeEventListenerの第二引数にはaddEventListenerと同一のhandleevent()メソッドのオブジェクトを入れても動かなくてどんな場合でもthisを入れる。または同じ記述にしたい場合はhandleevent()メソッドのオブジェクトを変数に格納する。

const btn2 = document.querySelector("button#basic2"), voh = {handleEvent:bf2};
function bf2() {
alert("アイウエオ"); btn2.removeEventListener("click", voh, false); } 
btn2.addEventListener("click", voh, false);

removeEventListenerの第二引数にはhandleevent()メソッドのオブジェクトを、そのまま、入れることはできない。removeEventListener()メソッドの応用的なプログラム高く連なる建物が幾つも築かれている

addEventListenerで第二引数の関数に値を送る、すなわちコールバック関数に引数を渡すとき、プログラムが変わるけど、removeEventListenerで解除するのも同じように合わせなくてはならない。無名関数を使うと解除できなくなるのも同じなので、解除できるものとしてhandleevent()メソッドのオブジェクトかbind()メソッドを使う場合が考えられる。前者に関しては基本的な方法と同じで、removeEventListenerの方だけthisを入れるかhandleevent()メソッドのオブジェクトを変数に格納してaddEventListenerと合わせる。後者に関しても似ているけど、ただし関数の「this」を設定するものだからremoveEventListenerにそれを入れてもそれ自身を指定して解除することにはならず、変数に格納してaddEventListenerと合わせるプログラムだけが機能する。bind()メソッドを使った場合にどう合わせるかサンプルボタン押すと一回目だけ「aiueo」というアラートが出て二回目以降は何も起こらない。HTML

<button id="advanced1" type="button">ボタン</button>

JavaScript

const btn3 = document.querySelector("button#advanced1"), vob = bf3.bind("aiueo");
function bf3() {
alert(this); btn3.removeEventListener("click", vob, false); } 
btn3.addEventListener("click", vob, false);

addEventListenerだけならば第二引数をbf3.bind("aiueo")としても大丈夫だけど、すると解除できなくなるので、解除したければ予めbind()メソッドの関数を変数に格納してremoveEventListenerと合わせるようにしておく。その他、コールバック関数の戻り値を関数にするとaddEventListenerにその引数を付けて記述しても大丈夫だけれどもremoveEventListenerで解除するには引数付きの関数名をbind()メソッドの場合と同じように変数に格納しなくてはならない。