Eine Veranstaltung ist ein wichtiger Bestandteil von Eine Webseite reagiert entsprechend einem aufgetretenen Ereignis. Einige Ereignisse werden vom Benutzer generiert, andere von APIs. In diesem Artikel erfahren Sie, wie Ereignisse auftreten und wie die Methode addEventListener in JavaScript in der folgenden Reihenfolge verwendet wird:
- Was ist Event Listener?
- AddEventListener () in JavaScript
- Parameterwerte
- AddEventListener in JavaScript: Beispiel
Was ist Event Listener?
Ein Ereignis-Listener ist eine Prozedur in JavaScript, die auf das Auftreten eines Ereignisses wartet. Das einfache Beispiel eines Veranstaltung ist ein Benutzer, der mit der Maus klickt oder eine Taste auf der Tastatur drückt.
Das addEventListener () ist ein eingebauter JavaScript-Funktion Das Ereignis muss abgehört werden, und ein zweites Argument muss aufgerufen werden, wenn das beschriebene Ereignis ausgelöst wird. Es können beliebig viele Ereignishandler zu einem einzelnen Element hinzugefügt werden, ohne vorhandene Ereignishandler zu überschreiben.
addEventListener () in JavaScript
Einige der Eigenschaften der Ereignis-Listener-Methode umfassen:
- Das addEventListener () Methode fügt ein Event-Handler auf das angegebene Element.
- Diese Methode hängt einen Ereignishandler an ein Element ohne an Überschreiben vorhandene Event-Handler.
- Du kannst hinzufügen viele Event-Handler zu einem Element.
- Sie können viele Ereignishandler der hinzufügen gleicher Typ zu eins Element zwei 'Klick' -Ereignisse.
- Ereignis-Listener können zu jedem hinzugefügt werden BEURTEILUNG Objekt nicht nur HTML-Elemente. das Fensterobjekt.
- Die addEventListener () -Methode macht es Einfacher zu steuern, wie die Ereignis reagiert zu sprudeln.
Bei Verwendung der Methode addEventListener () wird das JavaScript von der Methode getrennt Markup für bessere Lesbarkeit und ermöglicht das Hinzufügen von Ereignis-Listenern, auch wenn Sie das HTML-Markup nicht steuern.
Sie können einen Ereignis-Listener auch einfach mit dem entfernen removeEventListener () -Methode .
Syntax:
target.addEventListener (Typ, Listener [, Optionen]) target.addEventListener (Typ, Listener [, useCapture]) target.addEventListener (Typ, Listener [, useCapture, wantUntrusted])
Parameterwerte
| Parameter | Beschreibung |
Veranstaltung | Erforderlich. Eine Zeichenfolge, die den Namen des Ereignisses angibt. Hinweis: Verwenden Sie nicht das Präfix 'Ein'. Verwenden Sie beispielsweise 'click' anstelle von 'onclick'. Eine Liste aller HTML-DOM-Ereignisse finden Sie in unserer vollständigen HTML-DOM-Ereignisobjektreferenz. |
Funktion | Erforderlich. Gibt die Funktion an, die ausgeführt werden soll, wenn das Ereignis auftritt. wie man ein dynamisches Array in Java deklariert Wenn das Ereignis eintritt, wird ein Ereignisobjekt als erster Parameter an die Funktion übergeben. Die Art des Ereignisses Objekt hängt vom angegebenen Ereignis ab. Beispielsweise gehört das Ereignis 'click' zum MouseEvent-Objekt. |
useCapture | Optional. Ein boolescher Wert, der angibt, ob das Ereignis in der Erfassungs- oder in der Blasenphase ausgeführt werden soll. Mögliche Werte: true - Der Ereignishandler wird in der Erfassungsphase ausgeführt. Der Ereignishandler wird in der Blasenphase ausgeführt |
Nachdem Sie nun wissen, wie ein Ereignis-Listener funktioniert, sehen wir uns ein Beispiel für addEventListener () in JavaScript an.
addEventListener () in JavaScript: Beispiel
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gtDieses Beispiel verwendet die Methode addEventListener (), um eine Funktion auszuführen, wenn ein Benutzer auf eine Schaltfläche klickt ('myBtn'). addEventListener ('click', myFunction) -Funktion myFunction () {document.getElementById ('demo'). innerHTML = 'Hallo Welt'} & lt / script & gt & lt / body & gt & lt / html & gt 
Damit ist dieser addEventListener in JavaScript beendet. Ich hoffe du hast verstanden wie der Event Listener Methode funktioniert in JavaScript.
Schauen Sie sich unsere Dies beinhaltet ein von Lehrern geführtes Live-Training und praktische Projekterfahrung. Diese Schulung vermittelt Ihnen Kenntnisse in der Arbeit mit Back-End- und Front-End-Webtechnologien. Es umfasst Schulungen zu Webentwicklung, jQuery, Angular, NodeJS, ExpressJS und MongoDB.
Hast du eine Frage an uns? Bitte erwähnen Sie es im Kommentarbereich des Blogs 'addEventListener in JavaScript' und wir werden uns bei Ihnen melden.