Wie kann ich einen Event-Listener aus seinem eigenen Event-Handler in JavaScript entfernen?

Ereignis-Listener innerhalb von Ereignis-Handlern entfernen

Sie suchen nach einer Lösung, um einen Ereignis-Listener aus seiner eigenen Definition zu entfernen. Aufgrund des Ereignisverarbeitungsmechanismus von JavaScript ist dies jedoch nicht direkt möglich.

Ein Ansatz besteht darin, benannte Funktionen zu verwenden. Indem Sie eine benannte Funktion erstellen und diese als Ereignishandler verwenden, können Sie den Ereignis-Listener später entfernen, indem Sie auf seinen Funktionsnamen verweisen. Gleichzeitig sollte die Click-Variable außerhalb des Event-Handlers deklariert werden, um ihre Inkrementierung zu erleichtern.

var click_count = 0;

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

canvas.addEventListener('click', myClick);

Alternativ können Sie den Verschluss verwenden, um eine Funktion zu erstellen, die die Variable click_count kapselt. Mit diesem Ansatz können Sie den Zähler über mehrere Elemente hinweg erhöhen.

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

canvas.addEventListener('click', myClick);

Wenn Sie schließlich bevorzugen, dass jedes Element seinen eigenen Zähler hat, sollten Sie die Verwendung einer anonymen Funktion in Betracht ziehen, die einen Parameter für die anfängliche Klickanzahl akzeptiert.

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

canvas.addEventListener('click', myClick( 0 ));

Das obige ist der detaillierte Inhalt vonWie kann ich einen Event-Listener aus seinem eigenen Event-Handler in JavaScript entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!