Wie kann ich einen JavaScript-Ereignis-Listener entfernen?

Ich versuche, einen Ereignis-Listener innerhalb einer Listener-Definition zu entfernen:

canvas.addEventListener('click', function(event) {
    click++;
    if(click == 50) {
        // remove this event listener here!
    }
// More code here ...

Wie könnte ich das machen? dies = Ereignis…

Sie müssen benannte Funktionen verwenden.

Auch der click Die Variable muss sich zum Erhöhen außerhalb des Handlers befinden.

var click_count = 0;

function myClick(event) {
    click_count++;
    if(click_count == 50) {
       // to remove
       canvas.removeEventListener('click', myClick);
    }
}

// to add
canvas.addEventListener('click', myClick);

Sie könnten um die herum schließen click_counter Variable wie diese:

var myClick = (function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
})( 0 );

// to add
canvas.addEventListener('click', myClick);

Auf diese Weise können Sie den Zähler über mehrere Elemente hinweg erhöhen.

Wenn Sie das nicht möchten und möchten, dass jeder seinen eigenen Zähler hat, dann gehen Sie wie folgt vor:

var myClick = function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
};

// to add
canvas.addEventListener('click', myClick( 0 ));

   canvas.addEventListener('click', function(event) {
      click++;
      if(click == 50) {
          this.removeEventListener('click',arguments.callee,false);
      }

Sollte es tun.

Sie könnten einen benannten Funktionsausdruck verwenden (in diesem Fall ist die Funktion benannt). abc), etwa so:

let click = 0;
canvas.addEventListener('click', function abc(event) {
    click++;
    if (click >= 50) {
        // remove event listener function `abc`
        canvas.removeEventListener('click', abc);
    }
    // More code here ...
}

Quick-and-Dirty-Arbeitsbeispiel: http://jsfiddle.net/8qvdmLz5/2/.

Weitere Informationen zu benannten Funktionsausdrücken: http://kangax.github.io/nfe/.

Wenn die Lösung von @Cybernate nicht funktioniert, versuchen Sie, den Trigger in seine eigene Funktion zu unterteilen, damit Sie darauf verweisen können.

clickHandler = function(event){
  if (click++ == 49)
    canvas.removeEventListener('click',clickHandler);
}
canvas.addEventListener('click',clickHandler);

element.querySelector('.addDoor').onEvent('click', function (e) { });
element.querySelector('.addDoor').removeListeners();


HTMLElement.prototype.onEvent = function (eventType, callBack, useCapture) {
this.addEventListener(eventType, callBack, useCapture);
if (!this.myListeners) {
    this.myListeners = [];
};
this.myListeners.push({ eType: eventType, callBack: callBack });
return this;
};


HTMLElement.prototype.removeListeners = function () {
if (this.myListeners) {
    for (var i = 0; i < this.myListeners.length; i++) {
        this.removeEventListener(this.myListeners[i].eType, this.myListeners[i].callBack);
    };
   delete this.myListeners;
};
};

Offenbar hat niemand den Teil der aktuellen JavaScript-DOM-Spezifikation abgedeckt, der Ihnen einen Mechanismus zum Entfernen Ihres Ereignis-Listeners bietet ohne verwenden removeEventListener. Wenn wir uns ansehen https://dom.spec.whatwg.org/#concept-event-listener Wir sehen, dass es eine Reihe von Eigenschaften gibt, die übergeben werden können, um das Abhören von Ereignissen zu steuern:

{
  type (a string)
  callback (null or an EventListener object)
  capture (a boolean, initially false)
  passive (a boolean, initially false)
  once (a boolean, initially false)
  signal (null or an AbortSignal object)
  removed (a boolean for bookkeeping purposes, initially false) 
}

Nun, es gibt viele nützliche Eigenschaften in dieser Liste, aber zum Entfernen eines Ereignis-Listeners ist es die signal Eigenschaft, die wir nutzen möchten (die dem DOM Level 3 hinzugefügt wurde). Ende 2020), weil wir damit der JS-Engine mitteilen können, einen Ereignis-Listener zu entfernen, indem wir ihn einfach aufrufen abort() anstatt sich darum kümmern zu müssen removeEventListener:

const canvasListener = (new AbortController()).signal;

canvas.addEventListener('click', () => {
  click++;
  if (click === 50) {
    canvasListener.abort();
  } else {
    doSomethingWith(click);
  }
}, {
  signal: canvasListener 
});

(Beachten Sie, dass dies nicht verwendet wird useCapture Flag, da das useCapture-Flag im Wesentlichen völlig nutzlos ist)

Und fertig: Die JS-Engine wird unseren Event-Listener abbrechen und bereinigen. Kein Verweis auf die Bearbeitungsfunktion beibehalten, kein Sicherstellen, dass wir aufrufen removeEventListener mit genau den gleichen Eigenschaften wie wir aufgerufen haben addEventListener: Wir brechen einfach den Listener ab.

Ich denke, Sie müssen die Handler-Funktion möglicherweise im Voraus definieren, etwa so:

var myHandler = function(event) {
    click++; 
    if(click == 50) { 
        this.removeEventListener('click', myHandler);
    } 
}
canvas.addEventListener('click', myHandler);

Dadurch können Sie den Handler anhand seines Namens aus ihm selbst entfernen.