Eseménykezelés (Event Listeners)
A weboldalakon folyamatosan történik valami. A felhasználó mozgatja az egeret, rákattint egy gombra, görget lefelé, vagy megnyom egy gombot a billentyűzeten. Ezeket a történéseket a JavaScriptben Eseményeknek (Events) hívjuk.
A mi feladatunk fejlesztőként az, hogy "fülelőket" (Listenereket) tegyünk az oldalra, amik várják ezeket az eseményeket, és ha megtörténnek, lefuttatnak egy általunk írt kódot.
Az addEventListener() metódus
A modern JavaScriptben az események figyelésére az addEventListener parancsot használjuk. Ennek két dolgot kell megadnunk:
- Milyen eseményre figyeljen? (pl.
'click', azaz kattintás). - Mit csináljon, ha megtörténik? (Egy függvény, ami lefut).
Gyakorlati példa: A Sötét Mód gomb
Képzeljük el, hogy van egy gombunk a HTML-ben, amivel a felhasználó sötét módba (Dark Mode) kapcsolhatja az oldalt.
<!-- A HTML kódunk -->
<button id="tema-gomb">Sötét Mód bekapcsolása</button>Most írjuk meg a JavaScriptet, ami figyeli ezt a gombot:
// 1. Megkeressük a gombot a DOM-ban
const gomb = document.getElementById("tema-gomb");
// 2. Rátesszük a "fülelőt"
gomb.addEventListener("click", function() {
// Ez a kód CSAK AKKOR fut le, ha valaki rákattint a gombra!
// Megkeressük a <body> taget, és ráteszünk egy CSS osztályt
document.body.classList.toggle("sotet-tema");
// Megváltoztatjuk a gomb szövegét is
if (document.body.classList.contains("sotet-tema")) {
gomb.innerHTML = "Világos Mód bekapcsolása";
} else {
gomb.innerHTML = "Sötét Mód bekapcsolása";
}
});Mi az a classList.toggle?
A fenti kódban egy nagyon hasznos trükköt használtunk. A classList.toggle() egy beépített JS funkció. Megnézi a HTML elemet: ha nincs rajta a megadott CSS osztály (pl. "sotet-tema"), akkor ráteszi. Ha már rajta van, akkor leveszi. Olyan, mint egy villanykapcsoló fel-le kapcsolása.
Neked már csak annyi a dolgod, hogy a CSS fájlodban megírd, hogyan nézzen ki az oldal, ha a body-n rajta van ez az osztály:
/* A CSS fájlban */
body.sotet-tema {
background-color: #121212;
color: #ffffff;
}Ezzel a módszerrel (JS figyeli a kattintást -> JS rátesz egy osztályt -> CSS megváltoztatja a dizájnt) épül fel a modern webes interakciók 90%-a, a lenyíló menüktől kezdve a felugró ablakokig (modals).