Aufrufen einer JavaScript-Funktion mit dem onclick-Ereignis

1. Aufruf der JavaScript-Funktion mit dem Event-Handler onclick
2. Anhängen einer JavaScript-Funktion an ein HTML-Element mit reinem JavaScript
3. Definieren einer Funktion auf dem onclick Event-Handler im HTML-Element
4. Aufruf einer JavaScript-Funktion mit addEventListener

Auch wenn wir statischen HTML-Inhalt für eine Webseite entwerfen, möchten wir ihn möglicherweise benutzerinteraktiv gestalten. HTML-Elemente sind standardmäßig dumm. Das Tag <a> ist benutzerinteraktiv, wird aber hauptsächlich verwendet, um einen bestimmten Pfad zu laden. HTML-Elemente wie div können benutzerinteraktiv gemacht werden, indem ihnen ein Event-Handler hinzugefügt wird. Wir werden einen solchen Event-Handler diskutieren, der als onclick-Event-Handler bezeichnet wird. Es gibt mehrere Möglichkeiten, es einem HTML-Element hinzuzufügen.

Aufruf der JavaScript-Funktion mit dem Event-Handler onclick

Wir können eine JavaScript-Funktion an ein div binden, indem wir den Event-Handler onclick im HTML verwenden oder den Event-Handler in JavaScript anhängen. Betrachten wir den folgenden Code, in dem wir den Event-Handler an ein div-Element anhängen.

<div id="interactive-div" onclick="changeMyColor('interactive-div')" style="cursor: pointer;">Click me</div>

function changeMyColor(id) {
  var el = document.getElementById(id);
  el.style.color = 'blue';
}

Das Element div akzeptiert standardmäßig keine Klickereignisse. Im Code binden wir eine JavaScript-Funktion changeMyColor() an den onclick-Eventhandler des div. Es macht nun das div anklickbar. Obwohl wir einen onclick-Event-Handler für ein div definieren, wird der Benutzer nicht wissen, ob das div einen Klick akzeptiert oder nicht, es sei denn, er klickt. Es ist eine gute UI/UX, den Cursor anders markiert zu haben, sobald der Benutzer auf unserem Ziel div schwebt. Dazu weisen wir dem Element div einen Inline-Stil style="cursor: pointer;" zu. Sobald der Benutzer über das div schwebt, zeigt der Cursor ein Handzeichen, das darauf hinweist, dass es anklickbar ist.

function changeMyColor(id) {
  var el = document.getElementById(id);
  el.style.color = 'blue';
}

Im JavaScript-Code definieren wir die Funktion changeMyColor(), die an das Event onclick des div übergeben wird. Die Funktion nimmt die ID des div als Parameter. Es wählt das Element mit der document.getElementById(id) aus und ändert die Schriftfarbe des Elements auf blue mit der Zeile el.style.color = "blue";. Daher haben wir dem div eine JavaScript-Funktion zugewiesen und anklickbar gemacht.

Anhängen einer JavaScript-Funktion an ein HTML-Element mit reinem JavaScript

Im letzten Ansatz haben wir den Eventhandler onclick im HTML deklariert. Es gibt eine Möglichkeit, den HTML-Code sauber zu halten und eine JavaScript-Funktion an das div oder das entsprechende HTML-Element anzuhängen, ohne einen Event-Handler onclick im HTML anzugeben. Hier weisen wir das Ereignis click in JavaScript statt in HTML zu. Daher ist dieser Ansatz rein JavaScript-basiert und hält den HTML-Code sauber. Ein solcher Programmierstil wird als unauffälliges JavaScript bezeichnet. Lesen Sie den folgenden Code, um das Konzept besser zu verstehen.

<div id="interactive-div" style="cursor: pointer;">Click me</div>

window.onload =
    function() {
  var el = document.getElementById('interactive-div');
  el.onclick = changeMyColor;
}

function changeMyColor() {
  var el = document.getElementById('interactive-div');
  el.style.color = 'blue';
}

In Bezug auf den obigen Code haben wir den HTML-Code dem vorherigen Codebeispiel ähnlich gehalten. Wir haben im HTML keinen onclick-Event-Handler hinzugefügt. Stattdessen haben wir den Event-Handler onclick in JavaScript definiert und die gleiche Funktion changeMyColor in den JavaScript-Code angehängt. Hier sind ein paar Dinge zu beachten:

• Wir fügen den Event-Listener onclick in das window.onload ein. Wenn wir die Methode window.onload nicht verwenden, wird die Fehlermeldung Uncaught TypeError: Cannot set property 'onclick' of null ausgegeben. Dies liegt daran, dass das document.getElementById("interactive-div") versucht, das Element mit der id interactive-div abzufragen, während der HTML-Code geladen wird. Da das <script>-Tag im Abschnitt <head> enthalten ist, führt der JavaScript-Code den Inhalt des <script>-Tags aus, bevor das im <body>-Tag enthaltene div tatsächlich geladen wird. Daher findet die Funktion getElementById() das Element nicht und gibt null zurück. Daher wird ein Fehler ausgegeben, der besagt, dass onclick nicht auf null gesetzt werden kann.
• Ein weiterer zu beachtender Punkt ist, dass wir die Funktion dem Ereignishandler onclick ohne die Klammer () zuweisen. Schreiben wir el.onclick = changeMyColor(); anstelle von el.onclick = changeMyColor; wird die Funktion beim Laden des HTML ausgeführt, was nicht das ist, was wir wollen. Daher übergeben wir die Funktionsreferenz von changeMyColor an den Event-Handler onclick. Sobald der Benutzer das Ereignis onclick durch Anklicken des div auslöst, erfolgt der Funktionsaufruf changeMyColor. Und das div wird blau.

Definieren einer Funktion auf dem onclick Event-Handler im HTML-Element

Es gibt noch einige weitere Möglichkeiten, eine JavaScript-Funktion beim Event onclick aufzurufen. Wir können die Methode in HTML definieren. Dies wird jedoch nicht empfohlen, da es den HTML-Code unordentlich macht. Lesen Sie den folgenden Code zum besseren Verständnis.

<div onclick="(function() { alert('hello there'); })()" style="cursor: pointer;">click me!</div>

Wenn Sie auf das div klicken, wird der obige Code den Text hello there anzeigen. Hier codieren wir die Funktionsdefinition inline im HTML. Es ist eine anonyme Inline-Methode. Und wir können dieselbe Funktion nicht an anderer Stelle verwenden, da sie keinen zugeordneten Namen hat. Längere Funktionsdefinitionen sind umständlich und beeinträchtigen die Lesbarkeit des Codes.

Aufruf einer JavaScript-Funktion mit addEventListener

Eine Möglichkeit, den Event-Handler onclick hinzuzufügen, besteht darin, die Funktion .onclick() zu verwenden. Es gibt eine andere Möglichkeit, die allgemeiner ist und zum Hinzufügen vieler weiterer Ereignis-Listener verwendet werden kann. Dafür verwenden wir die Funktion .addEventListener() von JavaScript. Diese Funktion kann auf einem element, document-Interface oder sogar einem window-Objekt verwendet werden. Wir können die Funktion .addEventListener() verwenden, um einen Methodenaufruf einzurichten, wenn ein bestimmtes Ereignis ausgelöst wird.

• Parameter: Es sind einige obligatorische Parameter erforderlich: die Art eines Ereignisses, zum Beispiel Klick usw. und die Funktion listener. Die Funktion listener wird ausgeführt, wenn das Ereignis ausgelöst wird.
• Verwendung: Siehe den folgenden Code.

<div style="cursor: pointer;" id="interactive-div">click me!</div>

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('interactive-div')
      .addEventListener('click', function() {
        alert('hello');
      });
});

Dieser Codierungsstil ist eine reine JavaScript-basierte unauffällige JavaScript-Programmierung. Hier haben wir den click-Listener mit der Funktion .addEventListener() hinzugefügt und damit dies funktioniert, müssen wir sicherstellen, dass .getElementById("interactive-div") das Element zurückgibt. Daher packen wir den Code in den Event-Listener DOMContentLoaded im Interface document. Andernfalls gibt der Code einen Fehler aus, der besagt, dass er einem null-Objekt kein event hinzufügen kann.