Event-Handler an Elemente in JavaScript binden

Lassen Sie uns nun unsere DOM-Elemente lehren, auf die Aktionen des Website-Benutzers zu reagieren. Zum Beispiel, wenn der Benutzer irgendwohin mit der Maus klickt, soll unser Code diesen Klick verarbeiten und eine Information auf dem Bildschirm anzeigen.

Benutzeraktionen, die wir über JavaScript verfolgen können, werden Ereignisse genannt. Ereignisse können folgende sein: Ein Mausklick auf ein Seitenelement, das Bewegen der Maus über ein Seitenelement oder umgekehrt - das Verlassen des Elements durch den Mauszeiger und so weiter. Darüber hinaus gibt es Ereignisse, die nicht von Benutzeraktionen abhängen, zum Beispiel das Ereignis beim Laden der HTML-Seite im Browser.

Lassen Sie uns als Beispiel einen Button erstellen, bei dessen Klick ein Text auf dem Bildschirm ausgegeben wird. Zuerst erstellen wir den HTML-Code des Buttons:

<input id="button" type="submit">

HolEN wir uns nun einen Verweis auf den Button in eine Variable:

let button = document.querySelector('#button');

Jetzt müssen wir die Reaktion unseres Buttons auf einen Klick festlegen. Dafür gibt es in JavaScript eine spezielle Methode addEventListener, die als ersten Parameter den Namen des Ereignisses annimmt (Klick auf einen Button hat den Namen 'click'), und als zweiten Parameter - eine Funktion-Callback, die beim Eintreten dieses Ereignisses ausgeführt wird.

Lassen Sie uns zum Beispiel bei einem Klick auf den Button einen Text ausgeben:

button.addEventListener('click', function() {
	console.log('!!!');
});

Es sind 3 Buttons gegeben:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

Sorgen Sie dafür, dass beim Klick auf den ersten Button die Zahl 1 auf dem Bildschirm ausgegeben wird, beim Klick auf den zweiten - die Zahl 2, und beim Klick auf den dritten - die Zahl 3.