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

JavaScript
1document.getElementById("target").addEventListener("click", () => {
2  
3});

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

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

Zuishin

2020/09/14 22:38

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

m.ts10806

2020/09/14 22:38

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

tai57

2020/09/14 22:58

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

Zuishin

2020/09/14 23:07 編集

二つの選択肢のうちどちらかなのかを聞いたのに、そういう感じと言われても何もわかりません。例えば「駅に行く道は右と左とどっち？」「そういう感じで」は会話になっていないと思いませんか？

tai57

2020/09/14 23:06

僕は右でwww 解決したんで、もう良いです

Zuishin

2020/09/14 23:07

なんだただの荒らしか。

m.ts10806

2020/09/14 23:37

荒らしでしたね。

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

javascript
1const tg = document.getElementById("target");
2
3let listener; // removeEventListener 用
4
5// 定義時にリスナを記憶させておく。
6tg.addEventListener("click", listener = () => {
7
8});
9
10function removeTargetListener() {
11  // addEventListener で渡した関数を参照する変数でなければ、デタッチできない。
12  tg.removeEventListener ("click", listener)
13}

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

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