Mit Hilfe der AddEventListener () Methode kann ein JavaScript -Programmierer hinzufügen Event -Handler zu einem bestimmten Fensterobjekt. Mit dieser Methode können Sie die Reaktion für das entsprechende Ereignis kontrollieren. Das JavaScript ist aus dem HTML -Text isoliert, wenn Sie die addEventListener () -Methode verwenden, so.
In diesem Artikel werden das Verfahren zum Hinzufügen von Ereignishandlern zum Fensterobjekt in einem JavaScript-Programm erläutert. Darüber hinaus werden auch die Beispiele zur Verwendung der Methode addEventListener () bezogen. So lass uns anfangen!
Hinzufügen von Ereignishandlern zum Fensterobjekt in JavaScript
Als JavaScript -Programmierer können Sie die Methode addEventListener () verwenden, um ein Ereignishörer zu jedem HTML -Objekt hinzuzufügen. Es gibt einen anderen “AnJavaScript -Eigenschaft, die für denselben Zweck verwendet wird; Es ist jedoch im Vergleich zur Methode addEventListener () nicht viel nützlich, da die Methode addEventListener () Sie ermöglicht.
Syntax der addEventListener () -Methode
Objekt.AddEventListener (Ereignis, Funktion, Usecapture);Hier der erste Parameter “Fall”Wird hinzugefügt, um das Ereignis anzugeben, für das Sie den Event -Handler hinzufügen möchten. der zweite Parameter “,“Funktion”Ruft die Funktion auf, die ausgeführt wird, wenn das angegebene Ereignis auftritt. Der letzte Parameter ist optional, der Ereigniserfassungen oder Blasen sein kann.
Beispiel 1: Hinzufügen eines Ereignishandlers zum Fensterobjekt in JavaScript Hinzufügen
Wir werden die addEventListener () -Methode zur “hinzufügenFenster”Objekt im folgenden Beispiel. Die addEventListener () -Methode addEventListener () wird ausgelöst, wenn ein Benutzer die von "ausführt"Maus nach unten" Aktion:
JavaScript addEventListener ()
In diesem Beispiel wird die Methode addEventListener () im Fensterobjekt verwendet.
Wir können auch eine übergeben “FallObjekt bei der addEventListener () -Methode. Der "FallDas Objekt umfasst alle Informationen, die sich auf das MouseDown -Ereignis beziehen:
Führen Sie das oben gegebene Programm in Ihrem bevorzugten Code-Editor oder einer Online-Codierungssandbox aus. Wir werden das JSBin jedoch für diesen Zweck verwenden:
Die Ausführung des oben gegebenen JavaScript-Programms zeigt die folgende Ausgabe an:
Klicken Sie nun mit der linken Maustaste auf den Bildschirm und Sie sehen den folgenden Alarm:
Beispiel 2: Hinzufügen eines Ereignishandlers für Mausklickereignisse in JavaScript
In diesem Beispiel wird Ihnen das Verfahren des Hinzufügens eines Ereignishandlers für die Maus angezeigtklickenEreignis in JavaScript. In diesem Beispiel fügen wir dem Fensterobjekt nicht direkt Ereignis hinzu, sondern zu seinem Dokumentobjekt.
Erstens werden wir eine Überschrift mit dem hinzufügen
Tag, ein Absatz mit dem
Tag und eine Schaltfläche mithilfe des Tags:
Fügen Sie einen Event -Handler in JavaScript hinzu
In diesem JavaScript -Programm wurde die Methode addEventListener () verwendet
Wir haben auch eine ID hinzugefügt “Knopf 1" für unser "Klick mich" Taste:
Die GetElementById -Methode wird aufgerufen, um die Taste zu finden und zu erhaltenKnopf 1" Ausweis. Danach das "AddEventListener ()"Methode fügt eine" hinzu "klickenEreignis, das die "auslösen"displayDate ()" Methode:
Nachdem Sie die Ausgabe erhalten haben, klicken Sie auf die “Klick michSchaltfläche, um die aktuelle Uhrzeit und das aktuelle Datum zu überprüfen:
Abschluss
Mit der Methode addEventListener () können Sie dem Fensterobjekt und HTML -Elementen einen Ereignishandler hinzufügen. Ohne Überschreibung der vorhandenen Ereignishandler weist die JavaScript -Methode addEventListener () dem jeweiligen Objekt einen Ereignishandler zu, und ein einzelnes Fensterobjekt kann auch mehrere Ereignishandler haben. In diesem Artikel wurde das Verfahren zum Hinzufügen von Ereignishandlern zum Fensterobjekt in einem JavaScript-Programm erörtert, und die Beispiele, die sich auf die Verwendung der addEventListener () -Methode beziehen, werden ebenfalls demonstriert.