Change language
Python.Engineering Wiki Javascript-Ereignis-Listener

Javascript-Ereignis-Listener

__main__ Python module | ast Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | Event PHP module | exp | html Python module | http Python module | iat | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | test Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo 04.11.2021

JavaScript glänzt beim Hinzufugen interaktiver Funktionen zu einer Website. Während HTML und CSS verwendet werden, um die Struktur bzw. den Stil einer Webseite festzulegen, können Sie JavaScript verwenden, um Ihre Website dynamischer zu gestalten.

In JavaScript werden Ereignisse verwendet, um eine Website zu erstellen interaktiv. In diesem Leitfaden werden wir uber JavaScript-Ereignisse sprechen. Wir werden untersuchen, wo Ereignisse verwendet werden k√∂nnen, wie ein Ereignis definiert und wie ein Ereignis aufgerufen wird. Los geht’s!

Was ist ein JavaScript-Ereignis?

Ereignisse können entweder vom Browser oder vom Benutzer ausgelöst werden und können den Zustand der Webseite ändern. Wenn Sie auf einer Webseite auf eine Schaltfläche klicken, wird ein JavaScript-Ereignis erstellt. Wenn Sie auf ein sich erweiterndes Dropdown-Menu klicken, wird ein JavaScript-Ereignis verwendet.

JavaScript-Ereignisse haben eine Vielzahl von Verwendungsmöglichkeiten, darunter:

  • √úberprufen, ob ein Formular ausgefullt wurde
  • Navigieren eines Benutzers zu einer anderen Seite, wenn er ein Formular ausgefullt hat
  • Dropdown-Menus interaktiv machen
  • Benutzer zulassen zum Vergr√∂√üern und Verkleinern von Bildern

Um mit Ereignissen in JavaScript zu arbeiten, mussen Sie zwei Konzepte kennen: Ereignishandler und Ereignislistener.

An Ereignishandler ist eine Funktion, die ausgefuhrt wird, wenn ein Ereignis auf einer Webseite ausgelöst wird. Ereignis-Listener verbinden eine Ereignisfunktion mit einem HTML-Element, sodass bei der Ausfuhrung dieser Funktion das Webelement geändert wird.

Ereignishandler können auf drei Arten definiert werden: entweder mit einem Inline-Ereignis -Handler, eine Ereigniseigenschaft oder einen Ereignis-Listener.

Inline-Ereignishandler

Der einfachste Weg, mit Ereignissen in JavaScript zu beginnen, ist die Verwendung eines Inline-Ereignishandlers. Das bedeutet, dass Sie Ihre Veranstaltung in Ihrer HTML-Datei definieren.

Angenommen, wir entwerfen fur dieses Beispiel eine Website fur eine B√§ckerei namens JJ Smith’s Bakery. Wir m√∂chten, dass ein Benutzer mit dem Text "Antwort erhalten . aufgefordert wird .‚" beim Senden eines Formulars.

Berucksichtigen Sie den folgenden Code:

Dieser Code rendert eine Webseite, die wie folgt aussieht:

YhBM86zXeUH6CVstZ3cqjSfPpNHrDi1FRgWXFZMeCKNiTylMsE3TAEvgnvBLnl1zf30hlI6DcqWpXeFiL8YiojTKYJQeJ7 ESoQz4KhfCYhqlT9JmsxZZXRVj0EKBL9jbEaCs4Oe

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:

4o62 FifBmuVWJDrNanvSaMu6tbum7kfLhkIyJ75xZ3Xt CsRgZsCf8qnj13uN1VyaoDaapwFE4pG BMvjQUHsAa1jLlGtRVPbnmOLDmzr98tzw38e18YY8 Hcaym YGeDzjzFwo

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.

Lassen Sie unseren Code erneut ausfuhren und klicken Sie auf unsere Schaltfläche.

Die Ausgabe ist dieselbe, die wir in unseren letzten beiden Beispielen gesehen haben, aber dieses Mal verwenden wir einen HTML-Ereignis-Listener. Ereignis-Listener sind die neueste Möglichkeit, Ereignisse in zu deklarieren JavaScript, und sie sind vielleicht die am häufigsten verwendete Methode.

Schlussfolgerung

JavaScript-Ereignisse ermöglichen es Ihnen, Ihre Webseite interaktiv zu gestalten. Ein Ereignis könnte ausgelöst werden, wenn Sie eine Schaltfläche drucken, senden ein Formular oder bewegen Sie den Mauszeiger uber einen Text. Es gibt drei Möglichkeiten, ein Ereignis in JavaScript zu deklarieren: Inline, mithilfe einer Eigenschaft oder mithilfe eines Listeners.

Jetzt können Sie mit der Erstellung von Ereignissen beginnen in JavaScript wie ein professioneller Webentwickler!