¿Cómo puedo eliminar un detector de eventos de JavaScript?

Estoy tratando de eliminar un detector de eventos dentro de una definición de detector:

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

¿Cómo podría hacer eso? esto = evento…

Necesitas usar funciones con nombre.

También el click la variable debe estar fuera del controlador para incrementar.

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);

Podrías cerrar alrededor de la click_counter variables como esta:

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);

De esta manera, puede incrementar el contador en varios elementos.

Si no quieres eso y quieres que cada uno tenga su propio contador, entonces haz esto:

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);
      }

Deberías hacerlo.

Puede usar una expresión de función con nombre (en este caso, la función se llama abc), al igual que:

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 ...
}

Ejemplo de trabajo rápido y sucio: http://jsfiddle.net/8qvdmLz5/2/.

Más información sobre las expresiones de funciones con nombre: http://kangax.github.io/nfe/.

Si la solución de @Cybernate no funciona, intente dividir el gatillo en su propia función para que pueda hacer referencia a ella.

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;
};
};

Parece que nadie ha cubierto la parte de la especificación DOM de JavaScript actual que le brinda un mecanismo para eliminar su detector de eventos sin usando removeEventListener. si miramos https://dom.spec.whatwg.org/#concept-event-listener vemos que hay una serie de propiedades que se pueden pasar para controlar la escucha de eventos:

{
  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) 
}

Ahora, hay muchas propiedades útiles en esa lista, pero para eliminar un detector de eventos, es el signal propiedad que queremos usar (que se agregó al DOM nivel 3 a finales de 2020), porque nos permite decirle al motor JS que elimine un detector de eventos simplemente llamando abort() en lugar de tener que molestarse con removeEventListener:

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

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

(Tenga en cuenta que esto no utiliza el useCapture bandera, porque la bandera useCapture es esencialmente completamente inútil)

Y listo: el motor JS abortará y limpiará nuestro detector de eventos. Sin mantener una referencia a la función de manejo, sin asegurarse de que llamemos removeEventListener con exactamente las mismas propiedades que llamamos addEventListener: simplemente cancelamos el oyente.

Creo que es posible que deba definir la función del controlador con anticipación, así:

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

Esto le permitirá eliminar el controlador por su nombre desde dentro de sí mismo.