Események kezelése
A grafikus operációs rendszerek használata során is szinte mindig valamilyen eseménnyel (vagy azzal is) dolgozunk, ugyanígy a legtöbb grafikus felületen, tehát a webes felületen is. A JavaScript képes a böngészőkben használatos események legtöbbjének lekezelésére, lehető téve ezzel a fejlesztőknek, hogy a weblapjaikba olyan interaktív elemeket építsenek be, melyek pontosan azt teszik, amit a felhasználó igényelt. Az eseménykezelés jó lehetőség honlapunk tartalmának dinamikussá tételére.
A felhasználó dokumentumokat használva (sőt tulajdonképpen szinte minden számítógépes munkája alatt) eseményeket vált ki (például megnyomja az egér bal gombját), majd az éppen használt program valahogyan lekezeli ezt az eseményt.
Alternatívák
Az események lekezelése számos alternatívát jelent olyan esetekre, melyeket pusztán HTML-ből nem vagy csak egyszerűbb formában lehet megoldani. Néhány példa ilyen lehetőségekre:
A weblapon készítünk egy űrlapot, melyen különféle objektum található.
Navigáló nyilakat készíthetünk a honlapunkra.
Képek fölé mozgatás esetén képváltások kialakítása.
Eseménykezelők
A JavaScript eseménykezelői (zárójelben: mikor következik be az esemény):
onAbort (képletöltés megszakítása);
onBlur (fókusz elvétele);
onChange (elem értékének változása);
onClick (elemre kattintás);
onDragDrop (objektum ablakra dobása);
onError (betöltési hiba);
onFocus (fókusz odaadása);
onKeyDown (billentyű leütése);
onKeyPress (billentyű nyomvatartása);
onKeyUp (billentyű elengedése);
onLoad (oldal betöltése);
onMouseDown (egérgomb lenyomása);
onMouseMove (kurzor mozgatása);
onMouseOut (kurzor elmozdítása);
onMouseOver (hivatkozás felett kurzor mozgatása);
onMouseUp (egérgomb felengedése);
onMove (ablak mozgatása);
onReset (űrlap részeinek törlése);
onResize (ablak átméretezése);
onSelect (űrlap beviteli mezőjének kiválasztása);
onSubmit (űrlap továbbítása);
onUnLoad (oldalról való kilépés).
Az összetettebb eseménykezelők készítésének elvi okai:
A forráskódunk moduláris lesz: ugyanazon függvényt számos elem eseménykezelőjeként is meghívhatjuk.
A forrás jobban átlátható lesz.
Eseményeszelők definiálása
Egy esemény lekezeléséhez a JavaScriptben egy eseménykezelőt kell definiálni, mely egyaránt lehet egy függvény vagy utasítások sorozata. Ha egy HTML tag-hez tartozik esemény, akkor azt lekezelhetjük. Az eseménykezelő neve az esemény neve, melyet az „on” szócska előz meg. Ha egy HTML tag-hez eseménykezelőt szeretnénk létrehozni, a tag-et bővíteni kell az eseménykezelővel. A JavaScript kódot idézőjelek között adjuk meg, mint az attribútumokat. Az általános szintaxis:
<TAG esemenykezelo = ”JavaScript kod”>
ahol a TAG egy HTML tag.
Példa: eseménykezelő
Példaként tegyük fel, hogy létrehoztunk egy „szamol” nevű JavaScript függvényt. A böngészővel akkor hívatjuk meg ezt a függvényt, amikor a felhasználó egy „Kiszámol” feliratú gombra kattint, a függvényhívást pedig átadjuk a gomb onClick eseménykezelőjének:
<input type = ”button” value = ”Kiszámol” onClick = ”szamol(this.urlap)”>
Társított objektum
Minden eseménynek van egy társított objektuma. Az event objektum olyan információkkal szolgál az eseményről, mint az esemény típusa, a kurzor helye az esemény bekövetkezése alatt stb. Mikor egy esemény bekövetkezik, valamint van eseménykezelője az esemény lekezelésére, az event objektum argumentumként lesz továbbítva az eseménykezelőnek.
Példa: társított objektum
Vegyük például a MouseDown eseményt! Ekkor az event objektum tartalmazza az esemény típusát (jelen esetben MouseDown), az egérkurzor x és y pozícióját az esemény bekövetkezésének pillanatában, az egérgombot szimbolizáló számot, valamint egy mezőt, mely az esemény pillanatában lenyomott módosító billentyűket (Shift, Ctrl, Alt) tartalmazz. Az event objektum tulajdonságai eseményről eseményre változnak.
Események elfogása
Gyakran az az objektum kezeli le az eseményt, amelyen az esemény bekövetkezik. Például ha a felhasználó egy gombra kattint, rendszerint a gomb eseménykezelője kezeli le az eseményt. A nyelv eseményelfogási modellje lehetővé teszik számunkra, hogy olyan metódusokat definiáljunk, melyek azelőtt elfogják és lekezelik az eseményeket , mielőtt azok elérnék igazi céljukat. Ennek megvalósításához a window, document és a layer objektumok az alábbi esemény-specifikus metódusokat használják:
captureEvents: megadott típusú eseményeket fog el
releaseEvents: a megadott típusú események elfogását figyelmen kívül hagyja
routeEvent: az elfogott eseményt egy meghatározott objektumhoz irányítja
handleEvent: lekezeli az elfogott eseményt.
21. századi közoktatás - fejlesztés, koordináció (TÁMOP-3.1.1-08/1-2008-0002)
