Frontend jegyzetSearch...
Események
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):
| Esemény | Leírás |
|---|---|
| click | A felhasználó az elemre kattint |
| dblclick | Dupla kattintás az elemre |
| mousedown | A felhasználó valamely egérgombot lenyomta az elemen, de még nem engedte fel |
| mouseup | A felhasználó már lenyomott egy egérgombot és most engedi fel |
| mouseover | Felette tartja az egeret az elemünknek (CSS-ben :hover) |
| mouseenter | Amikor az egér az elemre először ér |
| mouseleave | Amikor az egér elhagyja az elemet |
| keypress | Amikor a felhasználó lenyom egy billentyűt és fel is engedi |
| keyup | Felhasználó már lenyomott egy gombot, de most engedi fel. |
| keydown | A felhasználó épp nyomvatart egy gombot, de még nem engedi fel |
| change | Az elem tartalma változott |
| load | Az elem betöltött |
| focus | A 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.
HTML
<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.
JavaScript
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.
JavaScript
gomb.addeventListener("click",eztFuttasdLe);
function eztFuttasdLe(){
....
}
\pagebreak