Jak usunąć event z elementu w innym obiekcie?

Question

// KLASA KTÓRA TWORZY KARTY DO GRY
class MakeCards {
    constructor() {
        let _colors = ["red", "blue", "green", "yellow", "cadetblue", "pink", "deepskyblue", "cornflowerblue", "firebrick", "red", "blue", "green", "yellow", "cadetblue", "pink", "deepskyblue", "cornflowerblue", "firebrick"];

        let _copiedColors = [];

        // METODA KTÓRA DOSTAJE JAKO PARAMETR POSZCZEGÓLNEGO DIVA, PRZYPISUJE MU LOSOWO KOLOR I USUWA Z TABLICY WYLOSOWANY KOLOR, ŻEBY NIE LOSOWAĆ GO PONOWNIE
        this.chooseColor = function (field) {
            const index = Math.floor(Math.random() * _copiedColors.length);
            this.addColor(_copiedColors[index], field)
            _copiedColors.splice(index, 1);
        };


        // METODA KTÓRA ROBI KOPIE TABLICY Z KOLORAMI, ŻEBY PODCZAS LOSOWANIA KOLORÓW MOŻNA BYŁO USUWAĆ Z NIEJ ELEMENTY, ŻEBY SIĘ NIE POWTARZAŁY
        this.refreshColors = function () {
            _copiedColors = _colors.slice();
        };
    };

    // METODA KTÓRA DODAJE WYLOSOWANY KOLOR DO KONKRETNEGO DIVA
    addColor(color, field) {
        field.classList.add(color);
    };
}

// KLASA KTÓRA SPRAWDZA WYNIK GRY
class Checking {
    constructor() {
        //ZMIENNA KTÓRA PODCZAS ODSŁANIANIA DRUGIEGO DIVA, PRZECHOWUJE NAM PIERWSZEGO DIVA, ŻEBYŚMY MOGLI PORÓWNAĆ CZY MAJĄ TAKI SAM KOLOR
        let _solution = '';
        let score = 0;


        this.check = function (e) {

            // SPRAWDZAM CZY DRUGI KLIKNIĘTY ELEMENT NIE JEST TYM SAMYM ELEMENTEM CO PIERWSZY
            if (e.target === _solution) {
                _solution = ''
                console.log(_solution);
                return
            }

            // WARUNEK W KTÓRYM SPRAWDZAM CZY JEST TO PIERWSZY ODSŁONIĘTY ELEMENT, JEŻELI TAK TO !CHCIAŁBYM USUNĄĆ Z NIEGO EVENT! 
            if (!_solution) {
                // \/\/\/\/\/\/\/\/\/\/\/\/\/\/ TUTAJ JAK BINDOWAŁEM TEŻ NIC NIE POMOGŁO
                e.target.removeEventListener('click', this.checkAns.check.bind(this));
                // /\/\/\/\/\/\/\/\/\/\/\/\/\
                e.target.classList.remove('hide');
                _solution = e.target;
                return
            };

            // RESZTA TEJ KLASY JEST MAŁO ISTOTNA JEŻELI CHODZI O PROBLEM USUNIĘCIA EVENTU, ALE GŁOWNIE TO DODAJE KLASY W ZALEŻNOŚCI CZY TRAFIŁEM W DIV Z TAKIM SAMYM KOLOREM, CZY TEŻ NIE

            e.target.classList.remove('hide');

            if (e.target.className === _solution.className) {
                console.log(++score);




                setTimeout(() => {
                    e.target.classList.add('off');
                    _solution.classList.add('off');
                    _solution = '';
                }, 1000);

            } else {
                setTimeout(() => {
                    e.target.classList.add('hide');
                    _solution.classList.add('hide');
                    _solution = '';
                }, 1000);
            }

        }
    }


}

class Game {
    constructor() {
        this.fields = document.querySelectorAll('div');
        // TWORZY INSTANCJE WYŻEJ ZADELKAROWANYCH OBIEKTÓW
        this.include = new MakeCards();
        this.checkAns = new Checking();
        
        this.startGame();
    };

    // METODA DODAJĄCA EVENT DO DIVÓW, ORAZ ZAKRYWAJĄCA KOLORY 
    addEvents() {
        this.fields.forEach(field => {
            field.addEventListener('click', this.checkAns.check.bind(this));
            field.classList.add('hide');
        });
    };

    startGame() {
        // TWORZĘ KOPIĘ TABLICY Z KOLORAMI, ŻEBYM MÓGŁ USUWAĆ Z NIEJ WYLOSOWANE ELEMENTY, ALE TE KOLORY BYŁY GDZIEŚ PRZY EW. PONOWNYM WŁĄCZENIU GRY
        this.include.refreshColors();

        
        this.fields.forEach(field => {
            // LOSOWANIE KOLORÓW DLA DIVÓW
            this.include.chooseColor(field);
        });

        // ZAKRYWANIE KOLORÓW I NADAWANIE DIVOM EVENTU - BYĆ MOŻE COŚ TEN THIS PSUJE?
        setTimeout(this.addEvents.bind(this), 2000);


    };

}

const a = new Game();

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Memory Game OOP</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-wrap: wrap;
        }

        div {
            flex-grow: 1;
            flex-basis: 16%;
            border: 2px solid white;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        .cadetblue {
            background-color: cadetblue;
        }

        .green {
            background-color: green;
        }

        .yellow {
            background-color: yellow;
        }

        .pink {
            background-color: pink;
        }

        .deepskyblue {
            background-color: deepskyblue;
        }

        .firebrick {
            background-color: firebrick;
        }

        .floralwhite {
            background-color: cornflowerblue;
        }

        .hide {
            background-color: #000;
        }

        .off {
            background-color: gray;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script src="MakeCards.js"></script>
    <script src="Checking.js"></script>
    <script src="main.js"></script>
</body>

</html>

W jaki sposób mogę usunąć event na elemencie który był dodany w klasie Game, kiedy chcę go usunąć w klasie Checking ?

I przy okazji, może macie jakiś lepszy pomysł na stworzenie tego obiektowo(tj. jak rozdzielić klasy itp)?

Z góry dzięki

Comments

Coś tam Ci wczoraj wieczorem napisałem, ale źle zrozumiałem twój problem. Ukryłem odpowiedź, bo myślę że nijak Ci pomogło, wybacz, a będę dopiero wieczorem w domu i tylko wtedy będę mógł spojrzeć na to dokładniej. Możliwe, że komuś innemu uda się odpowiedzieć w tym czasie na pytanie - nie chcę dawać błędnego złudzenia, że jest odpowiedź. :) Na ogół przypuszczam, że jest problem z Event Delegation.

---

@ajzyn (z ukrytego komentarza)

Tylko metody użyj do klasy .Checking.

1	e.target.removeEventListener('click', this.checkAns.check);

Robiłem w taki sposób w metodzie która jest wywoływana przez event(ten który chcę wyłączyć) w klasie .Checking, ale nie działa mimo, że this mam ustawiony prawidłowo (zbindowałem (?!) przy evencie this'a).

W swoim kodzie bindujesz przy dodawaniu listenera, ale już nie przy usuwaniu. Sprawdzaj sobie, na co wskazuje this, nawet ten który chcesz zbindować, bo może on wskazywać na co innego niż się spodziewasz.

Ogólnie co do problemu - wstawiłeś dość sporo kodu (ponad 100 linijek). Jeśli chcesz ułatwić pomoc Tobie, to dobrze by było żebyś opisał które fragmenty za co odpowiadają (zwłaszcza, te które nie działają tak, jak oczekujesz) i opisał co po kolei się wykonuje (co wywołuje co).

---

Opisałem kod, mam nadzieję, że ktoś mi pomoże, bo próbowałem już wielu rzeczy i są dwie opcje - albo robię jakiś bardzo banalny błąd, albo czegoś jeszcze się nie nauczyłem