Eseménykezelők hozzárendelése elemekhez JavaScriptben

Most pedig tanuljuk meg, hogyan reagálhatnak DOM elemeink a weboldal felhasználója által végzett műveletekre. Például, a felhasználó kattint valahova az egérrel, és a mi kódunknak válaszul fel kell dolgoznia ezt a kattintást és ki kell írnia valamilyen információt a képernyőre.

A felhasználó által végrehajtható, JavaScript segítségével nyomon követhető műveleteket eseményeknek nevezzük. Az események a következők lehetnek: egérkattintás egy weboldal elemen, az egér rámutatása egy elemre, vagy éppen az egérkurzor elmozdulása az elemről, és így tovább. Ezen kívül vannak olyan események is, amelyek nem függnek a felhasználó műveleteitől, például a HTML oldal böngészőbe történő betöltésének eseménye.

Példaként készítsünk egy gombot, amelyre kattintva valamilyen szöveg jelenik meg a képernyőn. Először készítsük el a gomb HTML kódját:

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

Most pedig kapjunk hivatkozást a gombra egy változóba:

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

Most meg kell határoznunk a gomb reakcióját a rákattintáskor. Ehhez a JavaScriptben létezik egy speciális addEventListener metódus, amelynek első paramétere az esemény neve (a gombra kattintás neve 'click'), második paramétere pedig egy visszahívó függvény, amely az esemény bekövetkeztekor fut le.

Például kattintáskor írjunk ki valamilyen szöveget:

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

Adott 3 gomb:

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

Állítsa be úgy, hogy az első gombra kattintva a 1 szám, a másodikra kattintva a 2 szám, a harmadikra kattintva pedig a 3 szám jelenjen meg a képernyőn.