Rufen Sie mehrere JavaScript-Funktionen im Onclick-Ereignis auf

  2. How-To's
  3. JavaScript-Anleitungen
  4. Rufen Sie mehrere JavaScript-Funktionen …
Nithin Krishnan 12 Oktober 2023
JavaScript JavaScript Event
  1. Übergeben von Funktionen als Werte an den onclick-Parameter
  2. Verwendung von unauffälligem JavaScript
  3. Mit den Tasten && und || Betreiber
Rufen Sie mehrere JavaScript-Funktionen im Onclick-Ereignis auf

Wir kennen das onclick-Ereignis in JavaScript sehr gut, das eine bestimmte Funktion auslöst, die als Wert an das onclick-Attribut übergeben wird. Das Ereignis Document Object Model (DOM) von HTML wird für fast alle HTML-Elemente unterstützt, mit Ausnahme einiger weniger wie <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> oder <title>. Es wird häufig für HTML-Tags wie <div>, <button>, <li>, <span>, <a> usw. verwendet. Aber wie rufen wir mehr als eine Funktion auf a . auf? Anklicken eines <div>, <li> oder eines <button>. Im Folgenden finden Sie einige Möglichkeiten, dies zu tun.

  • Übergabe von Funktionen als Werte an den onclick-Parameter
  • Verwendung von unauffälligem JavaScript
  • Mit den Tasten && und || Betreiber

Übergeben von Funktionen als Werte an den onclick-Parameter

Die gängigste Art, das Attribut onclick zu verwenden, besteht darin, dem onclick die Funktion als Werte zuzuweisen. Wir schreiben es normalerweise im GUI-Code innerhalb eines HTML-Tags. Um mehrere Funktionen als Werte zu übergeben, listen Sie sie durch Semikolons getrennt im Attribut onclick dieses Tags auf. Die Syntax dafür ist wie folgt.

onclick = 'functionA(); functionB();'

Beide Funktionen werden nacheinander ausgeführt. Wenn wir beispielsweise den folgenden Code mit den Funktionen functionA() und functionB() verwenden, ist das Ergebnis die sequentielle Ausführung der beiden Funktionen in der in den Werten angegebenen Reihenfolge.

<div id="output" onclick="functionA(); functionB();"></div>

function functionA() {
  for (let i = 0; i < 5; i++) {
    console.log(i + ' Mars is a planet');
  }
}
function functionB() {
  for (let i = 0; i < 5; i++) {
    console.log(i + ' The sky is blue');
  }
}

Ausgabe:

0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue

Bemerkungen

  • Das Ausführen mehrerer Funktionen mit onclick wird in allen Webbrowsern und für die meisten HTML-Elemente unterstützt. Es ist eine saubere und prägnante Methode zum Aufrufen mehrerer Funktionen.
  • Die Funktionsausführung ist sequentiell. Sie können also die Reihenfolge der Methodenaufrufe planen, indem Sie die Funktionen entsprechend auflisten.
  • Anstatt Semikolons nach einem Funktionsnamen zu verwenden, können wir sie auch durch ein Komma trennen. Das bedeutet, dass onclick = "function1(), function2()" auch eine gültige Syntax ist.
  • Es gibt einen Nachteil bei der Verwendung mehrerer Funktionen, die an ein onclick-Ereignis übergeben werden. Wenn eine der als Parameter übergebenen Methoden aufgrund einer Ausnahme fehlschlägt, wird die gesamte Kette unterbrochen. Und alle darauf folgenden Funktionen werden nicht ausgeführt.
  • Die Verwendung von onclick in Tags macht den Code lesbar. Wir manipulieren nicht das DOM wird nicht manipuliert. Das heißt, wir spezifizieren die Funktionen statisch im HTML. Daher fügen wir dem Ereignis onclick des DOM-Elements zur Laufzeit keine Funktion hinzu. Der Browser parst den HTML-Code und kann die Klickereignisse in der Parsing-Phase zuordnen.

Verwendung von unauffälligem JavaScript

Eine andere Möglichkeit, Funktionen im onclick in JavaScript zu übergeben, besteht darin, onclick-Listener im JavaScript-Code hinzuzufügen. Bei dieser Methode finden wir das Zielelement und verknüpfen unsere Funktion mit dem onclick-Ereignis dieses Elements. Der unauffällige Ansatz ist eine Art der Programmierung, bei der wir die JavaScript-Ereignisse im js-Code halten und der HTML-Code nur die statische Seite enthält (weitere Informationen finden Sie hier). Es folgt die unauffällige Möglichkeit, mehrere Funktionen für das Click-Ereignis aufzurufen.

let element = document.getElementById('output');
element.addEventListener('click', functionA);
element.addEventListener('click', functionB);

Ausgabe:

0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue

Bemerkungen

  • Die Funktionen werden sequentiell ausgeführt, sind aber nicht abhängig. Wenn also eine Funktion nicht ausgeführt wird, werden die restlichen Funktionen nicht blockiert, im Gegensatz zu onclick="functionA(), functionB()".
  • Wir können mit dieser Methode mehrere Funktionen hinzufügen. Um eine bereits hinzugefügte Funktion dynamisch zu entfernen, müssen wir den removeEventListener verwenden. Die Syntax ist wie folgt.
element.removeEventListener('click', alertFirst);
  • Es wird schwierig, die Funktionalität zu debuggen, da HTML die mit dem onclick des HTML-Elements verknüpften Funktionen nicht anzeigt. Die Methoden werden zur Laufzeit beim Kompilieren des JavaScript-Codes auf das Ereignis onclick abgebildet.
  • Diese Methode des Hinzufügens von onclick zur Laufzeit bietet die Flexibilität, Funktionen intelligent auf der Grundlage der Geschäftslogik auszuführen, da die Zuordnung während der Kompilierungsphase zur Laufzeit erfolgt.

Mit den Tasten && und || Betreiber

Man kann mehrere Funktionen einschließen, die durch && und || getrennt sind. Betreiber. Die Funktionen sollten einen booleschen Rückgabetyp haben. Normalerweise verwenden wir diesen Ansatz, wenn es erforderlich ist, über einige Bedingungen zu entscheiden und dann die beabsichtigte Funktion auszuführen. Wenn diese Bedingungen komplexe oder langwierige logische Prüfungen erfordern, wird es bevorzugt, diese als Funktionen zu erstellen und sie im js-Code zu belassen, um den HTML-Code schlank und lesbar zu machen. Der folgende Code erläutert die Verwendung.

<div id="output" onclick="isValidPage(pageNum) && fetchPageDetails(pageNum)"></div>

function isValidPage(pageNumber) {
  let pageNum = parseInt(pageNumber);
  let maxPagesCount = 10;
  let isValidPageNumber = false;
  if (!isNaN(pageNum)) {
    if (pageNum > 1 && pageNum < maxPagesCount) {
      isValidPageNumber = true;
    }
  }
  return isValidPageNumber;
}

function fetchPageDetails(pageNumber) {
  // Call Backend service to get the detils
}

Im obigen Code wird die Funktion fetchPageDetails() erst aufgerufen, nachdem die Funktion isValidPage() true zurückgibt. Im Wesentlichen sorgt der Operator && dafür, dass die Funktion fetchPageDetails() nur ausgeführt wird, wenn die pagenumber gültig ist.

Bemerkungen

  • Bei dieser Methode erfolgt die Ausführung der Funktionen sequentiell. Es folgt der Logik als Code mit dem && und dem || Betreiber. Wenn eine Methode aufgrund von Ausnahmen fehlschlägt, führt sie die restlichen Funktionen nicht aus.
  • Wir können diese Methode in Fällen verwenden, in denen wir Funktionen mit booleschen Rückgabetypen oder Typen haben, die dem im Code verwendeten logischen Operator entsprechen.
  • Da wir die Funktionen im Click-Attribut des HTML-Elements angeben, ist diese Methode eine statische Möglichkeit, mehrere Funktionen zu deklarieren. Wir machen keine Laufzeitzuordnungen.

Verwandter Artikel - JavaScript Event