Események 23.11.20

Lehetőségünk van arra, hogy több fajta interkciót is tudjunk kezelni az oldalunk elemeivel.

Következő lehetőségeink vannak az eseményekre (a teljesség igénye nélkül):

Kattintásra

EseményLeírás
clickA felhasználó az elemre kattint
dblclickDupla kattintás az elemre

Egér eseményei

EseményLeírás
mousedownA felhasználó valamely egérgombot lenyomta az elemen, de még nem engedte fel
mouseupA felhasználó már lenyomott egy egérgombot és most engedi fel
mouseoverFelette tartja az egeret az elemünknek (CSS-ben :hover)
mouseenterAmikor az egér az elemre először ér
mouseleaveAmikor az egér elhagyja az elemet

Billentyűzet eseményei

EseményLeírás
keypressAmikor a felhasználó lenyom egy billentyűt és fel is engedi
keyupFelhasználó már lenyomott egy gombot, de most engedi fel.
keydownA felhasználó épp nyomvatart egy gombot, de még nem engedi fel

Egyéb események

EseményLeírás
changeAz elem tartalma változott
loadAz elem betöltött
focusA böngésző az adott elemre fokuszál. Pl. ebbe az inputba fog írni a felhasználó

HTML alapon

Meg tudjuk adni a HTML dokumentumban egy adott elemnek attribútumként, hogy melyik eseményt kezelje. Ekkor a fenti táblázatban lévő esemény elé kerül egy on és leírjuk az esemény nevét. Az attribútum értéke pedig a meghívni kívánt függvény lesz.

<button onclick="alert('Hello, Zsombor!')">Hello</button>

Tulajdonság

Ha már kiválasztottuk az elemünket akkor lehetőségünk van tulajdonságként megadni, ekkor az előzőhöz hasonlóan járunk el, ugyanis az adott attribútumát szerkesztjük az elemnek.

gomb.onclick = function(){}

AddEventListener Ez az alapértelmezett!

Amit a legtöbbször használni fogunk (sima ES) esetén, az, hogy egy esemény figyelőt rendelünk hozzáaz adott elemunkhöz. Itt elég megadni a táblázsatban jelölt neveket.

gomb.addeventListener("click",eztFuttasdLe);

function eztFuttasdLe(){
  ....
}

\pagebreak
Table of Contents