Események

Események bemutatása a JavaScript-ben, működésük, használatuk.

Események

Az események szerepe hogy bizonyos feladatokat csak akkor hajtsunk végre, amikor egy előre meghatározott dolog megtörténik. Pl. amikor az oldal betöltődik, vagy amikor rákattintunk egy elemre, egy képre, kiválasztunk egy elemet egy legördülő listából (select), stb.

Az események által végrehajtandó feladatot azelőtt létre kell hozni, mielőtt az esemény megtörténne, ezáltal biztosítva azt, hogy végre is tudja hajtani. Mivel a legtöbb esemény, klikk, focus, mouseover, stb. csak azután lehetségesek, hogy az oldal megjelent számunkra, így a feladatok is be lesznek már töltődve, ezért az elemek után is lehet írni őket.

A leggyakoribb események a következők:

Oldal betöltődése után végrehajtandó feladat(ok)
Elemre kattintás után végrehajtandó feladat(ok)
Elem értékének megváltoztatása után végrehajtandó feladat(ok)
Elemre rátettük az egeret és azután szeretnénk végrehajtani feladato(ka)t
Elemről elmozgattuk az egeret és azután szeretnénk végrehajtani feladato(ka)t
Elemre fokuszáltunk és azután szeretnénk végrehajtani feladato(ka)t
Elemről elvettük a fokuszt és azután szeretnénk végrehajtani feladato(ka)t

Persze ezeken kivül még léteznek más események is, pl: ondrag, onpause, onplay, de első nekifutásnak elég ha néhány nagyon gyakorit megjegyzünk, a többiről majd máskor ejtünk szót.

Oldal betöltődése után végrehajtandó feladat(ok)

Ez az esemény akkor történik meg, amikor az oldalon betöltődött az összes CSS, JS fájl és a teljes HTML tartalom. Ezzel az eseménnyel érdemes beálltani az olyan feladatokat amelyek esetleg a weboldalunkat mindig teljes képernyőn jelenítené meg, ehhez viszont számolgatnia kellene, vagy ha a termékek elrendezését is egy javascript számolja ki, stb.

A window változóból az addEventListener függvénynek kell átadjuk az esemény típusát és egy függényt, amelyet végre fog hajtani, a következő formában:

    
        <script type="text/javascript">
            // oldal betöltődés esetén
            window.addEventListener( "load", function(){
                // végrehajtandó feladatok, pl
                feladat();
            });

            function feladat()
            {
            }
        </script>

Mivel ez a load esemény nem rögtön akkor fog végrehajtódni, amikor az oldal betöltődése ehhez a sorhoz ér, hanem akkor amikor az oldalon minden egyes elem betöltődött, ezért a feladat nevű függvényt utána is lehet írni, mert mire végrehajtódik az onload, arra már beolvasta a rendszer a feladat nevű függvényünket is.

Vagy lehetne a következő formában is direkt a feladatot átadni a load eseménynek:

    
        <script type="text/javascript">
            // oldal betöltődés esetén
            window.addEventListener( "load", feladat );

            function feladat()
            {
            }
        </script>

A harmadik változat, hogy a html body elemére állítjuk be az onload értéket a következő formában:

    
        <body onload="feladat();">
            Ide egyéb html elemeket meg mindent amit megjelenítünk az oldalon
        </body>

Elemre kattintás után végrehajtandó feladatok

Neve: onclick

Ez az esemény akkor történik meg, amikor a weboldalon egy elemre beállítottuk és arra az elemre vagy egy benne levő elemre kattintottunk.

Nagy általánosságban olyankor szokták használni, amikor pl. egy checkbox-ra kattintunk és attól függően, hogy bepipáltuk, vagy megszűntettük a pipát, egy másik elemet megjelenítünk vagy eltűntetünk, vagy olyankor amikor egy táblázatban egy sorra kattintva ki akarjuk színezni az egész sort, hogy látszon melyik sor van kijelölve.

De a felhasználásának csak a fantáziánk szabhat határt. Használata egyszerű, a HTML elemnek kell az "onclick" tulajdonságát beállítani, és ide beírni a végrehajtandó feladatot. Amennyiben több feladatot is végre szeretnénk hajtani érdemes egy függvényt meghívni az alábbi módon:

    
        <input type="checkbox" onclick="alert('Klikk')" />

        vagy több feladat esetén

        <input type="checkbox" onclick="feladat()" />

        <script type="text/javascript">
            // Létrehozzuk a végrehajtandó feladatokat
            function feladat()
            {
                // végrehajtandó feladatok
                alert('Klikk');
            }
        </script>

Ebben az esetben is, mivel az esemény csak akkor hajtódik végre amikor megtörténik a kattintás, ezért a feladat függvényt ráér később is létrehozni, hisz csak akkor kell létezzen amikor végre akarjuk hajtani. Mivel a kattintáshoz az oldal be kell legyen töltődve, és a betöltődés betölti a scripteket is, így biztos fog létezni mire eljutunk oda, hogy az elemre kattinthassunk.

Elem értékének megváltoztatása után végrehajtandó feladatok

Neve: onchange

Ez az esemény akkor történik meg, amikor pl. egy szövegmezőben átírjuk az addigi értéket, kitörölünk egy betűt, vagy beírunk egy újat, akár egy szünetet is.