So rufen Sie mehrere JavaScript-Funktionen im Onclick-Ereignis auf

Um mehrere Aktionen auszuführen, wenn ein Benutzer auf ein Element klickt, fügen Sie mehrere Funktionsaufruf-Anweisungen in einen Inline-onclick-Handler ein, registrieren Sie separate Callbacks mit addEventListener, oder verwenden Sie && und ||, wenn ein späterer Aufruf von einer Bedingung abhängen soll. Wählen Sie addEventListener für wartbaren Seitencode; Inline-Handler sind für kleine Beispiele prägnant, und logische Operatoren sind für bedingte Aufrufe gedacht.

Mehrere Funktionen aus einem Inline-onclick-Handler aufrufen

Ein Inline-Handler kann mehrere JavaScript-Anweisungen enthalten, die durch Semikolons getrennt sind. Die Aufrufe laufen der Reihe nach. Dadurch wird jede Funktion aufgerufen; es werden keine Funktionswerte an das Attribut übergeben.

Führen Sie dieses Beispiel aus:

function saveDraft() {
  console.log("Draft saved");
}

function showConfirmation() {
  console.log("Confirmation shown");
}

function handleClick() {
  saveDraft();
  showConfirmation();
}

handleClick();

Dieses eigenständige Beispiel zeigt die Reihenfolge der Anweisungen. In einer Seite können dieselben Aufrufe in den Inline-Handler einer Schaltfläche eingefügt werden:

<button type="button" onclick="saveDraft(); showConfirmation();">Save</button>

Das Element muss in der Seite vorhanden sein, und beide benannten Funktionen müssen verfügbar sein, wenn der Klick erfolgt. Wenn ein Aufruf eine nicht abgefangene Ausnahme auslöst, laufen spätere Anweisungen in demselben Handler nicht. Behandeln Sie Fehler innerhalb einer Funktion, wenn die nächste Aktion dennoch stattfinden muss.

Mehrere Click-Handler mit addEventListener registrieren

Registrieren Sie für Seitencode jeden Callback separat. Der Browser ruft Listener für den Klick in der Reihenfolge der Registrierung auf. Wenn ein Listener einen Fehler auslöst, meldet die Ereignisverteilung diesen Fehler, während andere registrierte Listener dennoch verteilt werden; separate Listener sind kein Versprechen, dass die asynchrone Arbeit eines Callbacks abgeschlossen ist, bevor ein anderer beginnt.

<button id="save" type="button">Save</button>
<script>
  const button = document.getElementById("save");

  function saveDraft() {
    console.log("Draft saved");
  }

  function showConfirmation() {
    console.log("Confirmation shown");
  }

  button.addEventListener("click", saveDraft);
  button.addEventListener("click", showConfirmation);

  // To remove a listener later, use the same callback reference:
  button.removeEventListener("click", showConfirmation);
</script>

removeEventListener benötigt denselben Ereignistyp, dasselbe Callback-Funktionsobjekt und dieselbe Capture-Einstellung wie bei der Registrierung. Wenn Sie eine anonyme Funktion registrieren und keine Referenz darauf behalten, können Sie später nicht dasselbe Funktionsobjekt zum Entfernen übergeben. Das HTML hält die Schaltfläche sichtbar und das JavaScript im Seitenskript; dieses Browserbeispiel ist kein Konsolenausgabe-Beispiel.

&& und || für bedingte Aufrufe verwenden

Logische Operatoren werten kurzschlüssig aus: && wertet seine rechte Seite nur aus, wenn die linke Seite wahr ist, während || seine rechte Seite nur auswertet, wenn die linke Seite falsch ist. Das ist nützlich, wenn die zweite Aktion nur unter dieser Bedingung laufen soll, registriert aber keine mehreren Ereignis-Listener.

function isValidPage(pageNumber) {
  return Number.isInteger(pageNumber) && pageNumber >= 1 && pageNumber <= 10;
}

function fetchPageDetails(pageNumber) {
  console.log(`Loading page ${pageNumber}`);
}

const pageNumber = 3;
isValidPage(pageNumber) && fetchPageDetails(pageNumber);

Hier läuft fetchPageDetails nur, wenn isValidPage einen wahren Wert zurückgibt. Mit || kann ein Fallback-Aufruf laufen, wenn der erste Ausdruck falsch ist, zum Beispiel hasSavedValue() || loadDefaultValue(). Verwenden Sie && und || für bewusste bedingte Ausführung; verwenden Sie separate Listener, wenn jeder registrierte Callback auf den Klick reagieren soll.