TypeScript: fjerner lytter for lokal fet pil

Jeg vil gjerne bruke en lokal fet pil for å bevare this-konteksten som:

document.addEventListener("keydown", (e: KeyboardEvent) => myobject.keyDownlistener(e));

Og jeg vil gjerne kunne fjerne denne lytteren senere, men ingen av de følgende fungerer:

document.removeEventListener("keydown", (e: KeyboardEvent) => myobject.keyDownlistener(e));
document.removeEventListener("keydown", myobject.keyDownlistener);

Hva kan jeg gjøre?

Svar #1

fjern denne lytteren senere, men ingen av følgende fungerer:

Hver gang du lager ()=> lager du en ny funksjon. Så du må sørge for at du legger til og fjerner den samme funksjonen:

// What you add
document.addEventListener("keydown", myobject.keyDownlistener);
// Is what you should remove
document.removeEventListener("keydown", myobject.keyDownlistener);

For å bevare this-konteksten, sørg for at myobject.keyDownlistener er definert som en fet pil (i stedet for en prototype-funksjon)

Mer

https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html

Svar #2

du kan lagre en referanse til den inline-funksjonen i en variabel (eller objektets egenskap som vist i dette eksemplet) og senere sende den inn i kallet til addEventListener

var myobject = {
    keyDownlistener: function (e) {
        if (e.key==="Enter") {
          console.log('you typed',this.msg);
          document.removeEventListener("keydown", myobject.kdl);
        }
        if (!this.msg) this.msg='';
        this.msg += e.key;
    }
};

document.addEventListener("keydown", myobject.kdl = (e) => myobject.keyDownlistener(e));
Click here then type a message followed by enter

hvis du er fornøyd med å bruke en ekstern variabel:

var kd,myobject = {
    keyDownlistener: function (e) {
        if (e.key==="Enter") {
          console.log('you typed',this.msg);
          document.removeEventListener("keydown",kd);
        }
        if (!this.msg) this.msg='';
        this.msg += e.key;
    }
};

document.addEventListener("keydown", kd = (e) => myobject.keyDownlistener(e));
click here and type a line of text

Relaterte artikler