Warum ruft „addEventListener' meine Funktion sofort auf und nicht bei einem Ereignisauslöser?

„addEventListener ruft die Funktion ohne Eingabeaufforderung auf“ erklärt

Wenn Sie einen Ereignis-Listener an ein Element anhängen, möchten wir, dass die Funktion nur ausgeführt wird, wenn das Ereignis eintritt. In manchen Fällen kann es jedoch schwierig sein, sicherzustellen, dass die Funktion nicht vorzeitig aufgerufen wird.

Bedenken Sie den folgenden HTML-Code:

<span>

Wir möchten dem ein Klickereignis hinzufügen zweiter Link:

second.addEventListener('click', message_me('shazam'));

wobei „message_me“ eine externe Funktion ist, die eine Nachricht anzeigt. Überraschenderweise löst dieser Code die Funktion „message_me“ sofort aus, noch bevor wir auf den zweiten Link klicken.

Das Problem

Das Problem liegt in der Art und Weise, wie JavaScript mit Funktionsreferenzen umgeht als zweites Argument von 'addEventListener'. JavaScript erwartet einen Verweis auf eine Funktion, aber im problematischen Code wird die Funktion „message_me('shazam')“ sofort aufgerufen und stattdessen ihr Ergebnis übergeben.

Die Lösung

Es gibt zwei Möglichkeiten, dieses Problem zu lösen:

• Erstellen Sie eine anonyme Funktion: Wickeln Sie „message_me“ in eine anonyme Funktion ein, um eine Funktionsreferenz zurückzugeben:

second.addEventListener('click', function() {
    message_me('shazam');
});

Diese Lösung stellt sicher, dass „message_me“ nur aufgerufen wird, wenn auf den zweiten Link geklickt wird.

• Eine Funktion von „message_me“ zurückgeben: Ändern Sie „message_me“, um eine Funktion zurückzugeben Referenz:

function message_me(m_text) {
    return function() {
        alert(m_text);
    };
}

second.addEventListener('click', message_me('shazam'));

In diesem Fall erhält 'addEventListener' eine Referenz auf eine Funktion, die ausgeführt wird, wenn das Klickereignis auftritt.

Das obige ist der detaillierte Inhalt vonWarum ruft „addEventListener' meine Funktion sofort auf und nicht bei einem Ereignisauslöser?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!