Wie entferne ich einen Ereignis-Listener aus seiner eigenen Definition in JavaScript?

Ereignis-Listener in JavaScript entfernen

In JavaScript werden Ereignis-Listener häufig verwendet, um auf Benutzerinteraktionen zu reagieren. Es kann jedoch vorkommen, dass Sie diese Listener aus verschiedenen Gründen entfernen müssen.

Problem:

Sie möchten einen Ereignis-Listener aus der Definition des entfernen Zuhörer selbst. Versuche, „this“ im Listener zu verwenden, führen jedoch zu Fehlern.

Lösung 1: Benannte Funktionen

Um dieses Problem zu lösen, verwenden Sie benannte Funktionen anstelle anonymer Funktionen :

var click_count = 0;

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

// Add the event listener
canvas.addEventListener('click', myClick);

In dieser Lösung wird die Variable „click_count“ außerhalb des Listeners definiert, um ihre Sichtbarkeit innerhalb der Funktion sicherzustellen. Außerdem ist „myClick“ eine benannte Funktion, die es ermöglicht, sie später zu entfernen.

Lösung 2: Schließung

Alternativ können Sie Schließungen verwenden, um dies zu erreichen:

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

// Add the event listener
canvas.addEventListener('click', myClick);

Bei diesem Ansatz wird ein Abschluss um die Variable „click_count“ erstellt. Die Funktion „Handler“ erhöht den Zähler und entfernt bei Bedarf den Ereignis-Listener.

Lösung 3: Einzelne Zähler

Wenn jedes Element einen eigenen Zähler benötigt, verwenden Sie diese Lösung :

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

// Add the event listener with a unique click counter for each element
canvas.addEventListener('click', myClick(0));

Das obige ist der detaillierte Inhalt vonWie entferne ich einen Ereignis-Listener aus seiner eigenen Definition in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!