JavaScriptの「EventListener」についての質問です

Question

document.getElementById("target").addEventListener("click", () => {
  
});

この上のコードは、targetをclickした時に処理を加えるって意味ですよね

では、もう一度clickしたら処理をなくす、みたいなイベント・コードはないんでしょうか

Comments

[Zuishin]

処理をなくすというのは、二回クリックしたら三回目からは無視するという意味ですか？
それとも、一回目のクリックで行った処理(例えばアコーディオンを開くなど)を二回目で解除する(例えばアコーディオンを閉じるなど)という意味ですか？

[m.ts10806]

探してなにもでない内容でしょうか
探したのなら具体的に記載しないことには伝わりません

[tai57]

Zuishinさん

そういう感じです！
何かないもんですか？

[Zuishin]

二つの選択肢のうちどちらかなのかを聞いたのに、そういう感じと言われても何もわかりません。

例えば「駅に行く道は右と左とどっち？」「そういう感じで」は会話になっていないと思いませんか？

[tai57]

僕は右でwww

解決したんで、もう良いです

[Zuishin]

なんだただの荒らしか。

[m.ts10806]

荒らしでしたね。

Answer 1

回答は出ていますが、補足です。

イベントを解除するには、イベントリスナ（関数オブジェクト）への参照が重要になります。

const tg = document.getElementById("target");

let listener; // removeEventListener 用

// 定義時にリスナを記憶させておく。
tg.addEventListener("click", listener = () => {

});

function removeTargetListener() {
  // addEventListener で渡した関数を参照する変数でなければ、デタッチできない。
  tg.removeEventListener ("click", listener)
}

例えば、以下のコードでは解除できません。

document.getElementById("target").addEventListener("click", () => {

});

// 第二引数に渡されるリスナは「新しい関数オブジェクト」なので、
// 「そもそも、定義されていない」と無視される。
document.getElementById("target").removeEventListener("click", () => {

});

Answer 2

EventTarget.removeEventListener - Web API | MDN

対象の、第一引数の名称のイベントを削除するメソッドです。
'click'を指定すれば、クリックイベントを削除することができます。