Modern ismeretek WEB oldalon : Javascript ismertető HTML formátumban

Event objektum

Az event objektumok bemutatása
Tulajdonságok (Microsoft) :
offsetX, offsetY Csak olvashatóMS JScriptMS IE4.0 Objektum-relatív koordináták
clientX, clientY Csak olvashatóMS JScriptMS IE4.0 Képernyő koordináták
x,y Csak olvashatóMS JScriptMS IE4.0 Szülőelemek relatív koordinátái
keyCode Csak olvashatóMS JScriptMS IE4.0 Billentyű kódok
altKey, ctrlKey, shiftKey Csak olvashatóMS JScriptMS IE4.0 Különleges billentyűk
Tulajdonságok (Netscape) :
layerX, layerY Csak olvashatóJavaScript 1.2Netscape4.0 Objektum-relatív koordináták
screenX, screenY Csak olvashatóJavaScript 1.2Netscape4.0 Képernyő koordináták
pageX, pageY Csak olvashatóJavaScript 1.2Netscape4.0 Ablak-relatív koordináták
which Csak olvashatóJavaScript 1.2Netscape4.0 Egér / Billentyűkódok
modifiers Csak olvashatóJavaScript 1.2Netscape4.0 Különleges billentyűk
type Csak olvashatóJavaScript 1.2Netscape4.0 Az események tipusai
Elemfüggvények (metódusok) : nincs
Alárendelt objektumok : nincs

event: Általános tudnivalók

Az event objektum segítségével olyan felhasználói eseményekre tudunk reagálni, mint egy klikk az egér gombjával, egy billentyű leütése és ezek kombinációi.

A felhasználó által keltett eseményeket úgy kísérhetjük figyelemmel, hogy egy HTML tag-ban egy Event-Handler (esemény figyelő) metódust hívunk meg, vagy közvetlenül a JavaScript segítségével az esemény megfigyelését végezzük. Ha a kérdéses esemény bekövetkezik, akkor meghívunk egy  saját készítésű függvényt , mely az eseményt értelmezi, feldolgozza és reagál rá.

Annak ellenére, hogy a Netscape 4.x úgymint a MS Internet Explorer 4.x ismeri az event objektumot, nem egységes annak értelmezése. Igen sok a sajátos megoldás, erősebben fogalmazva : teljes a káosz ezen a területen. Más a szintakszis, bizonyos tulajdonságok vagy csak a Netscape vagy csak a Microsoft böngészőjére érvényesek. Ennek ellenére megkisérlünk olyan programokat is bemutatni, melyek mindkét Browser alatt hibajelzés nélkül futnak.

Események figyelése közvetlen JavaScript programozással :

Példa: 

<html><head><title>Teszt</title>
<script language="JavaScript1.2">
var Netscape = new Boolean();
if(navigator.appName == "Netscape")  Netscape = true;  
function megnyomva(esemeny) {
 if(Netscape)
  {window.status="ASCII " + esemeny.which + " nyomva";return true;}
}  
function elengedve(esemeny) {
 if(Netscape)
  {window.status="ASCII " + esemeny.which + " elengedve";return true;}
}
document.onkeydown = megnyomva;
document.onkeyup = elengedve;
</script>
<!-- JScript-terület az MS Internet Explorer számára -->
<script for=document event="onkeydown()" language="JScript">
{window.status="ASCII "+window.event.keyCode+" nyomva";return true;}
</script>
<script for=document event="onkeyup()" language="JScript">
{window.status="ASCII "+window.event.keyCode+" elengedve";return true;}
</script>
</head><body>
</body></html>

Magyarázat:

A példa a billentyű események figyelését végzi a dokument objektumra vonatkoztatva. Magyarán ha a felhasználó a kijelzőterületre klikkel (így rákerül a fókusz a dokumentra) és egy billentyűt megnyom illetve elenged,akkor az így keletkezett eseményt kezeli le. A példában a billentyű decimális (ASCII) értékét írjuk ki alul a státuszsorba.

Annek érdekében, hogy a Netscape 4.x és MS Internet Explorer 4.x böngészők ezt hiba nélkül végezzék, kijelöltünk egy JavaScript terület és két JScript területet. A JScript területet csak az MS Internet Explorer értelmezi, míg a language="JavaScript1.2" által jelzett script területet csak a Netscape 4, így a régebbi böngészők, pl. Netscape 3 ezt a területet figyelemen kívül hagyják.

Netscape : A példában két függvényt definiáltunk, ezek : megnyomva(esemeny) és elengedve(esemeny). Ezen paramétereken keresztül érjük el az event objektum tulajdonságait. A which a Netscape megadása szerint a lenyomott billentyű decimmális kódját tárolja. Az események figyelése azonban önmagában véve nem elég, meg is kell hívni az eseménykezelő függvényeket. Ezt a célt szolgálja a JavaScript-terület végén látható két sor :

document.onkeydown = megnyomva;
document.onkeyup = elengedve;

Vegyük észre, hogy itt csak a függvények neve szerepel, utána nincsenek zárójelek .

Microsoft : A példában rá a language= "Jscript" területek parancsai vonatkoznak. Ezekben megadjuk, hogy mely eseményt : event="onkeydown()" és event="onkeyup()" mely objektumra nézve : for=document kísérjen figyelemmel. Ezeken a területeken aztán minden, az MS Internet Explorer által ismert objektum metódust és tulajdonságot, pl.: window.event.keyCode élérhetünk ill. lekérdezhetünk.

Csak olvashatóMSJScriptMS IE4.0 offsetX, offsetY

Microsoft szintakszis. Megadja a kurzor vizszintes (offsetX) és függőleges (offsetY) koordinátáit (pixelben, relatív érték), az ablak bal felső sarkához viszonyítva.

Példa:

<html><head><title>Teszt</title>
<script language="JScript">
function nyomi() {
 alert("A gombon : "+window.event.offsetX+"/" + window.event.offsetY);
 }
</script>
</head><body>
<form>
<input type=button value="  Klikkelj rám  " onClick="nyomi()">
</form>
</body></html>

Magyarázat:

A példában egy objektumot mutatunk, melyre ha ráklikkelünk, akkor kiírja egy üzenőablakba az egér koordinátáit, az objektum bal felső sarkához viszonyítva.

Csak olvashatóMSJScriptMS IE4.0 clientX, clientY

Microsoft szintakszis. Megadja pixelben, a kijelzőablak bal felső sarkához viszonyítva, az egér kursor (clientX),(clientY) koordinátáit relatív értékekkel, mely pl. az egér események figyelésekor lehet hasznos.

Példa:

<html><head><title>Teszt</title>
<script for=document event="onmousedown()" language="JScript">
 {
  document.all.Ugrik.style.left = window.event.clientX;  
  document.all.Ugrik.style.top = window.event.clientY;
 }
</script>
</head><body>
<div id="Ugrik" style="background-color:#FFE0FF; position:absolute;
top:100px; left:100px; width:100px; height:100px;"></div>
</body></html>

Magyarázat:

A példa bemutat egy <div>-területet, ahol a stíluslap abszolút értékekkel van megadva. Ha a felhasználó az egérrel az ablakra klikkel, akkor a szines kis négyzet oda ugrik, ahova az egér kurzor mutat.

Csak olvashatóMSJScriptMS IE4.0 x, y

Microsoft szintakszis. Megadja pixelben, a szülőablak bal felső sarkához viszonyítva, az egér kursor x,y koordinátáit abszolut értékekkel, mely pl. az egér események figyelésekor hasznos. Ha nincs szülő ablak, akkor a dokumentum bal felső sarkához viszonyítva adja meg a koordinátákat.

Példa:

<html><head><title>Teszt</title>
<script language="JScript">
function pozicio() 
 { alert("x = " + window.event.x + "/ y = " + window.event.y);}
</script>
</head><body>
<div style="position:absolute; left:10px; top:140px;
background-color:#FFFFE0">
<p onClick="pozicio()">Klikkelj  ide  rám !</p>
</div>
</body></html>

Magyarázat:

A példa egy abszolut koordinátákkal kijelölt terület (<div>...</div>) és azon belül egy egyszerű szöveget jelenít meg. Ha ráklikkelünk erre a sorra, akkor a pozico() nevű függvény lesz meghívva. Eredetileg a szülő ablakhoz viszonyítva írja ki pixelben az egér koordinátáit, a példában a kijelzőablak bal felső sarkához viszonyít.

Csak olvashatóMSJScriptMS IE4.0 keyCode

Microsoft szintakszis. Megadja a lenyomott billentyű decimális kódját. (ASCII/ANSI érték)

Példa:

<html><head><title>Teszt</title>
<script for=document event="onmousedown()" language="JScript">
  { alert(window.event.keyCode); }
</script>
</head><body>
</body></html>

Csak olvashatóMSJScriptMS IE4.0 altKey, ctrlKey, shiftKey

Microsoft szintakszis. Megadja, hogy egy kiegészítő billentyű, mint az ALT, Shift, Ctrl egy másik billentyűvel illetve egér klikk együtt volt megnyomva.

Példa:

<html><head><title>Teszt</title>
<script for=document event="onkeypress()" language="JScript">
 {
  if(window.event.shiftKey)
   alert("A Shift és egy másik billentyű is meg lett nyomva !");
 }
</script>
</head><body>
</body></html>

Csak olvashatóJavaScript 1.2Netscape4.0 layerX, layerY

Netscape szintakszis. Az onresize eseményt figyelve megkapjuk egy objektum illetve egy Layer terület aktuális szélességét (layerX) és magasságát (layerY). Mindez pl. az egér által keltett események figyelésekor értékes tulajonság.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function wResize(esemeny) {
 window.status = esemeny.layerX + "x" + esemeny.layerY; return true;
}  
window.onresize = wResize;
</script>
</head><body>
</body></html>

Magyarázat:

A példa figyeli, hogy a kiválasztott ablak mérete megváltozott-e. Ha igen, akkor kiírja a megváltozott értékeket a státuszsorba.

Csak olvashatóJavaScript 1.2Netscape4.0 screenX, screenY

Netscape szintakszis. Az egéresemények figyelésekor megadja a képernyőn a kursor abszolút pozicióját pixelben.Vizszintes (screenX) és függőleges (screenY) értékek.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function pozicio(esemeny){
 alert("x érték: "+esemeny.screenX+" / y érték: " +esemeny.screenY);}
document.onmousedown = pozicio;
</script>
</head><body>
</body></html>

Magyarázat:

A példa figyeli, hogy a felhasználó az egér gombját megnyomta-e. Ha igen akkor egy üzenőablakban a képernyő abszolút koordinátáit kiírja.

Csak olvashatóJavaScript 1.2Netscape4.0 pageX, pageY

Netscape szintakszis. Megadja a kurzor vizszintes (pageX) és függőleges (pageY) koordinátáit (pixelben, relatív érték), az ablak bal felső sarkához viszonyítva.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function LayerPos(esemeny) {
 document.layers[0].left = esemeny.pageX;
 document.layers[0].top = esemeny.pageY;
}  
document.onmouseup = LayerPos;
</script>
</head><body>
<layer top=50 left=50 width=100 height=100 bgcolor=#FFE0FF></layer>
</body></html>

Magyarázat:

A példa egy Layer objektumot mutat. Ha a felhasználó az egérrel az ablakra klikkel és elengedi azt, akkor a Layer arra a pozicióra ugrik, ahol az egér gomját elengedtük.

Csak olvashatóJavaScript 1.2Netscape4.0 which

Netscape szintakszis. Megadja, hogy az egér melyik gombját nyomtuk meg (decimális érték)

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function melyik(esemeny)
  {alert("Egér gomb: " + esemeny.which); } 
document.onmousedown = melyik;
</script>
</head><body>
</body></html>

Magyarázat:

A példa figyeli hogy melyik egérgombot nyomtuk meg. Így: a baloldali egér gomb értéke 1, a középső 2 és a jobboldali 3.

Csak olvashatóJavaScript 1.2Netscape4.0 modifiers

Netscape szintakszis. Megadja, hogy egy kiegészítő billentyű, mint az Alt, Shift, Ctrl, Alt Gr egy másik billentyűvel illetve egér klikkel együtt volt megnyomva.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function figyel(esemeny){
 if(esemeny.modifiers & Event.ALT_MASK)
  alert("Egér klikk és ALT gomb megnyomva!")
 if(esemeny.modifiers & Event.CONTROL_MASK)
  alert("Egér klikk és Ctrl gomb megnyomva!")
 if(esemeny.modifiers & Event.SHIFT_MASK)
  alert("Egér klikk és Shift gomb megnyomva!")
 if(esemeny.modifiers & Event.META_MASK)
  alert("Egér klikk és ALT Gr gomb megnyomva!")
}  
document.onmousedown = figyel;
</script>
</head><body>
</body></html>

Magyarázat:

A példában ha ráklikkelünk az ablakra és megnyomjuk az Alt vagy Ctrl vagy Shift vagy AltGr billentyűt, akkor megjelenik egy üzenőablak. A szintakszis bit-operatorokat használ.

Csak olvashatóJavaScript 1.2Netscape4.0 type

Netscape szintakszis. Meghatározza a fellépő esemény tipusát.Az eltárolt érték előtt nincs "on" szócska, így pl.: mouseup, keypress vagy select.

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function figyel(esemeny)
  { alert("esemeny: " + esemeny.type); }
document.onmouseup = figyel;
document.onkeyup = figyel;
</script>
</head><body>
</body></html>

Magyarázat:

A példa kijelzi a megfigyelt események tipusát. Jelen példában kétféle eseményt figyelünk. Az egyik, ha a felhasználó megnyomja az egér gombját, a másik ha elengedi azt.
Start

Készült : 1999-10-27. Lengyel Sándor