Az HTML DOM események segítségével dinamikus és interaktív weboldalakat lehet létrehozni, amelyek reagálnak a felhasználói interakciókra és változásokra a dokumentumban. Az események különböző típusúak lehetnek, például kattintás (click), egérmozgás (mousemove), billentyűleütés (keydown), űrlap beküldése (submit), stb.
Az eseménykezelők olyan JavaScript függvények, amelyeket egy elemhez vagy eseményhez rendelhetünk, hogy meghatározzuk, mit tegyen a böngésző, amikor az adott esemény bekövetkezik.
<button onclick=”Fuggveny1()”>Click me</button>
Ebben az esetben az onclick az event listener, a meghívott függvény az eseménykezelő. (event handler)
button.addEventListener(„click”, Fuggveny1);
JS-ben a lick az esemény, a Fuggveny1 függvény pedig az eseménykezelő.
Példa: Érjük el, hogy az oldal betöltésekor rögtön jelenjen meg egy felugró ablak! (onload esemény)
Készítsünk egy szövegbeviteli mezőt! Ha belekattintunk (onfocus esemény), legyen sárga a háttere, ha kikattintunk belőle (onfocusout esemény) akkor legyen újra fehér! Adjunk a beviteli mezőnek egy id-t, és az onfocusout eseménynél módosítsuk a beírt szöveget nagybetűsre!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="hu"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body onload="fuggveny()"> Név: <input type="text" id="szoveg" onfocus="fuggveny2(this)" onfocusout="fuggveny3(this)"> <script> function fuggveny(x){ alert("Onload esemény") } function fuggveny2(x){ x.style.background="yellow"; } function fuggveny3(x){ x.style.background="white"; let y = document.getElementById("szoveg"); y.value = y.value.toUpperCase(); } </script> </body> </html> |