Javascript-Ereignis-Listener

Bisher ist nicht viel los. Unsere Webseite enthält eine Schaltfläche, die etwas tun soll, wenn wir auf unsere Schaltfläche klicken. Wenn wir auf unsere Schaltfläche klicken, passiert nichts. Dies liegt daran, dass wir unseren Event-Handler noch schreiben mussen.

Fugen Sie in die Datei main.js den folgenden Code ein:

Dieser Code findet das Element mit der ID "gesendet‚" und √§ndert seinen Inhalt in "Formular gesendet‚" Dieser Code wird nur ausgefuhrt, wenn unsere Funktion submitForm() aufgerufen wird. Dies ist geplant, wenn der Benutzer auf unsere Schaltfl√§che klickt.

Wenn wir auf unsere Schaltfläche klicken, geschieht Folgendes:

Wie Sie sehen, ist unsere Aufforderung erscheint. Wir haben einen Inline-Event-Handler verwendet, um unsere Webseite interaktiv zu gestalten. Inline-Ereignishandler sind jedoch nicht die einzige Möglichkeit, Ereignisse in JavaScript zu verwenden. Lassen Sie uns besprechen, wie Sie die Event-Handler-Eigenschaft in unserem Code verwenden.

Ereignisse mit Handler-Eigenschaften

In einem Inline-Handler mussen Sie angeben, welche Funktion Sie in Ihrem . ausfuhren möchten HTML-Datei. In unserem HTML-Code von vorhin haben wir in dieser Zeile die Funktion definiert, die wir beim Drucken unserer Schaltfläche aufrufen wollten:

Mithilfe der Handler-Eigenschaften k√∂nnen wir die "onclick‚" Ereignis aus unserem Code. Dadurch k√∂nnen wir das gesamte JavaScript, das unsere Webseite interaktiv macht, in eine eigene Datei verschieben. In diesem Beispiel weisen wir unserer Schaltfl√§che die ID "Schaltfl√§che" zu, damit wir unsere Schaltfl√§che in unserem JavaScript-Code identifizieren k√∂nnen. Entfernen wir das onclick-Ereignis und weisen Sie unserer Schaltfl√§che eine ID zu:

Damit unser Ereignis ausgel√∂st wird, wenn unsere Schaltfl√§che gedruckt wird, schreiben wir ein Ereignis mit einer Handler-Eigenschaft in unsere "main. js‚" Datei. Hier ist der Code, den wir verwenden werden:

Wenn Sie diesen Code ausfuhren und auf die Schaltfläche klicken, wird Folgendes zuruckgegeben:

Unsere Schaltfläche funktioniert genauso wie zuvor, aber unser Code ist anders geschrieben. Anstatt unsere Ereignishandler inline zu schreiben, haben wir sie in unsere Datei main.js verschoben. Dies hilft uns, wartungsfreundlicheren Code zu schreiben, weil wir Sie mussen nicht unseren gesamten HTML-Code durchlesen, um herauszufinden, wo unsere Inline-Ereignisse ausgelöst werden.

Ereignis-Listener

Ereignis-Listener können verwendet werden, um ein Ereignis in JavaScript zu deklarieren. Listener suchen immer dann, wenn der Zustand eines Elements i s geändert, und wenn dieses Element geändert wird, wird der Code im Listener ausgefuhrt.

Wenn Sie beispielsweise auf eine Schaltfl√§che klicken, die mit einem Ereignis-Listener verbunden ist, wird der Listener ‚Äûh√∂ren‚" dass ein Mausereignis ausgel√∂st wurde. Dann wird der Code ausgefuhrt, den Sie mit diesem bestimmten Ereignis-Listener verknupft haben.

Unser HTML-Code fur dieses Beispiel ist der gleiche wie oben, aber wir werden eine kleine √Ñnderung an unserem &ldquo ;main.js‚" Datei:

In diesem Code verwenden wir addEventListener um Erstellen Sie einen Ereignis-Listener. Dies geschieht, anstatt unsere JavaScript-Funktion submitForm() an ein onclick-Ereignis zu binden, wie wir es in unseren letzten beiden Beispielen getan haben.

Wir geben "click‚" um unserem Code mitzuteilen, dass er darauf lauschen soll, wenn mit dem Mauszeiger auf unsere Schaltfl√§che geklickt wird. Neben dem Klickereignis gibt es noch andere Ereignistypen, z. B. Tastaturereignisse, aber wir konzentrieren uns in dieser Anleitung auf das Mausklickereignis.