Warum lösen meine Ereignis-Listener Funktionen sofort aus?

Ereignis-Listener: Das Geheimnis unaufgeforderter Funktionsaufrufe

Bei der Arbeit mit Ereignis-Listenern kann es zu einem rätselhaften Verhalten kommen: Das Hinzufügen eines Ereignis-Listeners mit einer externen Funktionsreferenz scheint so zu sein um die Funktion sofort aufzurufen, auch ohne auf das Element zu klicken. Dies kann frustrierend sein und zu unerwartetem Verhalten führen.

Bedenken Sie das folgende HTML-Snippet:

<span>

Um Klickereignisse hinzuzufügen, könnte man die Methode addEventListener verwenden:

first.addEventListener('click', function() {
  alert('sup!');
})

Dieser Code funktioniert wie erwartet und löst eine Warnung aus, wenn auf den „Ersten Link“ geklickt wird. Wenn jedoch eine externe Funktion als zweites Argument verwendet wird:

function message_me(m_text) {
    alert(m_text)
}

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

Die Funktion message_me wird sofort aufgerufen, was zu einer Warnmeldung führt, noch bevor auf den „Zweiten Link“ geklickt wird.

An Um dieses Problem zu lösen, muss man verstehen, dass der zweite Parameter von addEventListener eine Funktionsreferenz erwartet. Im problematischen Code wird die Funktion direkt aufgerufen und ihr Ergebnis an addEventListener übergeben. Stattdessen sollte entweder eine anonyme Funktion als zweites Argument verwendet werden oder die externe Funktion sollte so geändert werden, dass sie eine Funktion zurückgibt.

Zum Beispiel können wir eine anonyme Funktion innerhalb von addEventListener verwenden:

function message_me(m_text) {
    alert(m_text)
} 

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

Durch die Bereitstellung einer Funktionsreferenz innerhalb der anonymen Funktion stellen wir sicher, dass die Funktion message_me nur aufgerufen wird, wenn auf den „Zweiten Link“ geklickt wird.

Das obige ist der detaillierte Inhalt vonWarum lösen meine Ereignis-Listener Funktionen sofort aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!