AddEventListener gegen Onclick in JavaScript
Während des Erstellens von Webseiten für eine Website kann einige zusätzliche Funktionen für erweiterte Funktionen vorhanden sein. Überprüfen Sie beispielsweise im Fall von Automatisierungstests die Funktionsweise verschiedener Funktionen beim Ereignisauslöser. In solchen Fällen bietet JavaScript zwei wichtige Techniken, die dazu beitragen, ein Gesamtdokumentdesign zugänglich zu machen, das als AddEventListener () -Methode und Onclick -Event zugänglich ist.
Dieses Handbuch wird theoretisch und praktisch das AddEventListener und das Onclick -Ereignis vergleichen.
AddEventListener gegen Onclick in JavaScript
In JavaScript die “AddEventListener ()”Methode und die“ONCLICK”Ereignis beide funktionieren für ein Ereignis und können eine Rückruffunktion ausführen, wenn eine Schaltfläche klickt. Sie sind jedoch nicht ganz gleich.
Die addEventListener () -Methode enthält ein Ereignis in sein Argument. Darüber hinaus können mehrere Ereignishandler auf dasselbe Element anwenden und mehrere Ereignishandler nicht gleichzeitig überschreiben. Während das Onclick -Ereignis ausgelöst wird, wenn der Benutzer die entsprechende Schaltfläche gegen das Ereignis klickt. Es ist nur eine Eigenschaft des HTMLelement -Objekts und kann im Gegensatz zur Methode addEventListener () überschrieben werden.
Syntax
Element.AddEventListener (Ereignis, Listener, Usecapture);In der gegebenen Syntax “,“Fall"Bezieht sich auf das angegebene Ereignis"Hörer"Ist die Funktion, die aufgerufen wird und"usecapture”Ist der optionale Wert.
Syntax
Html
In der gegebenen Syntax “,“Element”Zeigt das Element an, mit dem das“ONCLICKEreignis wird zugeordnet. Hier, "MyScript”Bezieht sich auf die Funktion, die auf die Aufforderung an das Onclick -Ereignis aufgerufen wird.
JavaScript
Objekt.onclick = function () myScript;Ebenso in der obigen Syntax “,“Objekt”Bezieht sich auf das Objekt, das dem Onclick -Ereignis zugeordnet ist.
Kernunterschiede zwischen AddEventListener und Onclick -Event
| AddEventListener | ONCLICK |
| AddEventListener -Methode kann nur in JavaScript hinzugefügt werden. | Onclick kann sowohl in HTML als auch in JavaScript aufgenommen werden. |
| AddEventListener funktioniert in den älteren Versionen einiger Browser nicht. | Onclick ist mit allen Browsern kompatibel. |
| Diese Funktion kann mehrere Ereignisse an ein bestimmtes Element anhängen. | Dieses Ereignis assoziiert nur ein einzelnes Ereignis einem Element. |
| Es kann keine HTML- und JavaScript -Dateien verknüpfen. | Das Onclick -Ereignis kann die Funktionen von HTML und JavaScript verbinden. |
Gehen wir nun die folgenden Beispiele durch, um den angegebenen Unterschied klar zu verstehen.
Beispiel: AddEventListener () -Methode zum Erkennen, ob die bestimmte Taste gedrückt wird
Wenden Sie in diesem speziellen Beispiel die an “dokumentieren.AddEventListener ()"Methode und ein Ereignis namens" anhängen "Taste nach untenIn seiner Argumentation. Dies führt dazu, dass der Benutzer über Alarm benachrichtigt wird, wenn die “EingebenTaste wird gedrückt:
dokumentieren.AddEventListener ("Keydown", (e) =>if (e.Key == "ENTER")
ALERT ("Taste eingeben wird gedrückt"))
);
Die entsprechende Ausgabe ist:
Beispiel: Onclick -Ereignis, um die Schaltflächenfarbe zu ändern
Im folgenden Beispiel erstellen wir eine Schaltfläche mit der “Taste" Ausweis. Dann geben Sie eine ein “ONCLICKEreignis, das den Funktionsknopf aufgerufen wird, klicken Sie auf die Schaltfläche: Klicken Sie auf:
Definieren Sie nun eine Funktion namens “Knopffarbe()”. Greifen Sie in der Funktionsdefinition mit der “auf die Schaltfläche zudokumentieren.GeelementById ()" Methode. Wenden Sie auch den Stil an.Hintergrund -Color -Eigenschaft, um die Farbe der Schaltfläche festzulegen und ihm einen RGB -Farbcode als Hintergrund zuzuweisen:
Funktion buttoncolor ()dokumentieren.getElementById ("Button").Stil.BIGINGCOLOR = '#911';
Ausgang
Beispiel: Onclick -Ereignis, um die Schaltflächenfarbe mit JavaScript zu ändern
Das oben diskutierte Beispiel kann angewendet werden, indem das Hinzufügen des „Hinzufügens“ angewendet werden kannONCLICKEreignis im JavaScript -Code. Erstellen Sie zunächst eine Schaltfläche mit dem “" Schild:
Holen Sie sich nun die erstellte Schaltfläche mit der “abdokumentieren.GetElementById ()Methode und wenden Sie die “anONCLICKEreignis darauf. Wiederholen Sie nun alle weiteren Schritte, um die Farbe der Schaltfläche zu ändern:
Lassen Sie Taste = Dokument.getElementById ("Button")Taste.onclick = function buttoncolor ()
dokumentieren.getElementById ("Button").Stil.BIGINGCOLOR = '#911';
Dies führt zu dem gleichen Ausgang:
Wir haben die Unterschiede zwischen AddEventListener und Onclick in JavaScript erörtert.
Abschluss
Der Hauptunterschied zwischen AddEventListener -Funktion und Onclick -Ereignis besteht darin, dass AddEventListener mehrere Ereignisse an ein einzelnes HTML -Element anhängen kann, während das Onclick -Ereignis das Klickereignis nur mit einer Schaltfläche in Verbindung bringen kann. Darüber hinaus kann AddEventListener nur mit dem JavaScript -Code verwendet werden, und das Onclick -Ereignis funktioniert sowohl in HTML- als auch in JavaScript -Dateien. Dieses Handbuch leitete sich über die AddEventListener -Methode und das Onclick -Ereignis sowohl theoretisch als auch praktisch.