Esemeny kezelo

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

	Event-Handler (Eseménykezelő)
Az eseménykezelésről általában
onAbort		Betöltés megszakításakor
onBlur		Elhagyáskor (fókusz elvitelekor)
onChange		Módosításkor
onClick		Ráklikkeléskor
onDblClick		Dupla klikkeléskor
onError		A betöltési hiba keletkezésekor
onFocus		Kiválasztáskor
onKeydown		Nyomvatartott billentyű mellett
onKeypress		Lenyomott majd felengedett billentyű esetén
onKeyup		Felengedett billentyű mellett
onLoad		HTML fájl betöltésekor
onMousedown		Lenyomott egérbillentyű mellett
onMousemove		Egérkurzor áthúzásakor
onMouseout		Egérkurzor elvitele az elemről
onMouseover		Egérkurzor az elem felett
onMouseUp		Egérbillentyű elengedésekor
onReset		Az űrlap adatainak eldobásakor
onSelect		Szöveg kiválasztásakor
onSubmit		Az űrlap elküldésekor
onUnload		A fájl elhagyásakor
javascript:		JavaScript hivatkozási pont

Az eseménykezelésről általában

Event-Handler (Esemény kezelő) fontos összekötőkapocs a HTML és a JavaScript között. Mivel az eseménykezelés a HTML által is ismert, ezért a a W3-as konzorcium a HTML nyelvi szabvány részévé tette azt. Ebben rögzítve van, hogy egy bizonyos eseménykezelők mely HTML Tag-ben fordulhatnak elő. Problémát jelent, hogy a Netscape nem tartotta magát szigorúan e szabványhoz. Az MS Internet Explorer 4.x eseménykezelése azonban már megfelel a HTML 4.0 szabványnak. Mielőtt programunkat felrakjuk a hálóra, tanácsos ezek hatását többféle böngészőn is kipróbálni.

Csak azokat az eseménykezelőket említjük, melyek a HTML tag-ban valóban előfordulnak és a HTML 4.0 szabvány részei. Ez alól csak az onAbort= a kivétel, mely nem a HTML 4.0 szabvány része.

Eseménykezelőt a HTML tag attribútumaként hozunk létre. Ezt mindig az on szócska vezeti be. Pl.: onClick=, melyet idézőjelek között egy JavaScript utasítás követ. Ha több JavaScript utasítást kívánunk végrehajtani, célszerű ezeket egy JavaScript területen megadni és egy saját készítésű függvény által meghívni. Pl. onChange="Vizsgal()"

onAbort

Ez az esemény akkor következik be, ha a felhasználó megszakítja a grafikák betöltését egy linkre vagy a Stop gombra történő kattintással.

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <img>

Példa:

<html><head><title>Teszt</title>
</head><body>
<img src="grafika.jpg" width=400 height=600 alt="Grafik" 
onAbort="alert('Kár, hogy nincs türelme a kép betöltését megvárni')">
</body></html>

onBlur

Ez az esemény akkor következik be, ha a felhasználó elviszi a fókuszt az elemről.

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <body> <frameset> <input> <layer> <select> <textarea>

A HTML 4.0 szabványa szerint a következő HTML tag-ben fordulhat elő : <a> <area> <button> <input> <label> <select> <textarea>

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="Teszt">
Név: <input type=text name="bevitel" onBlur="Vizsgal(this.value)">
</form>
<script language="JavaScript">
document.Teszt.bevitel.focus();
function Vizsgal(mezo) {
 if(mezo == "") {
  alert("Kérem a név mezőt kitölteni !");
  document.Teszt.bevitel.focus();
  return false;
 }
}
</script>
</body></html>

Magyarázat:

A példában az űrlapon egy egysoros beviteli mező látható. Az űrlap definiálás után egy JavaScript területet jelöltünk ki. Azért csak utána, mert a JavaScript területen egy hivatkozás van az űrlapon levő mezőre, melyre a fókuszt azonmód rávisszük. A mező elhagyásakor generált esemény kiváltja a Vizsgal() függvény hívását. Ha a mező üresen maradt, akkor figyelmeztető jelzést adunk neki és ismét kiválasszuk azt..

onChange

Ez az esemény akkor következik be, ha egy mező értéke megváltozik.

A HTML 4.0 szabványa és a Netscape megadása szerint következő HTML tag-ben fordulhat elő: <input> <select> <textarea>

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="Teszt">
<textarea rows=8 cols=32
 onChange="alert(this.value)">Megjegyzés</textarea>
</body></html>

onClick

Ez az esemény akkor következik be, ha a felhasználó ráklikkel az elemre.

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <a> <area> <input> <textarea>

A HTML 4.0 szabványa szerint a következő HTML tag-ben fordulhat elő : <a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Példa:

<html><head><title>Teszt</title>
</head><body>
<form>
<input size=30 name="kijelez" readonly><br>
 <input type=button value="Utoljára módosítva:"
 onClick="this.form.kijelez.value=document.lastModified">
</form>
</body></html>

Magyarázat:

A példában az űrlapon egy beviteli mezőt és egy nyomógombot definiáltunk. A beviteli mezőt csak kijelzésre használjuk, ezért annak tartalma nem módosítható. Ha a felhasználó ráklikkel a nyomógombra (onClick), akkor a mezőben megjelenik a fájl utolsó módosításításának dátuma és ideje.

onDblClick

Ez az esemény akkor következik be, ha a felhasználó duplán klikkel egy elemre.

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <a> <area> <input> <textarea>

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="fel">
Szám: <input size=10 name="ert">
<input type=button "value=Négyzetre emel, ha kétszer kattint"
onDblClick=
"document.fel.ert.value=document.fel.ert.value*document.fel.ert.value">
</form>
</body></html>

Magyarázat:

A példában az űrlapon egy beviteli mezőt és egy nyomógombot definiáltunk. A button tag-ben jegyezzük az onDblClick= eseménykezelőt. Ha a felhasználó kétszer kattint a nyomógombra, akkor a szám négyzete lesz visszaírva a mezőbe.

Figyelem:

A Netscape böngészőjében ez az eseménykezelő nem használható !

onError

A betöltés során keletkezett hibajelzést tudjuk a sajátunkra lecserélni, de magát a hibát ezáltal nem lehet megszüntetni. (Pl. a kérdéses grafika nem létezik)

A Netscape JavaScript megadása szerint következő HTML tag-ben fordulhat elő :<img>

Példa:

<html><head><title>Teszt</title>
</head><body>
<img src="xxxx.gif" onError="alert('A grafika nem tölthető be')">
</body></html>

onFocus

Ez az esemény akkor következik be, ha a felhasználó ráviszi a fókuszt az elemre ( kiválasztottá teszi azt ).

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <body> <frame> <input> <layer> <select> <textarea>

A HTML 4.0 szabványa szerint a következő HTML tag-ben fordulhat elő : <a> <area> <button> <input> <label> <select> <textarea>

Példa:

<html><head><title>Teszt</title>
</head><body>
<form>
<input size=30 onFocus="this.value='Itt a nevét adhatja meg'"><br>
<input size=30 onFocus="this.value='Itt a címet adhatja meg'"><br>
<input size=30 onFocus="this.value='Itt a hobbit adhatja meg'"><br>
</form>
</body></html>

Magyarázat:

A példában az űrlapon három beviteli mezőt definiáltunk, de a mezők nincsenek feliratozva. Ha a felhasználó puszta kiváncsiságból kiválassza a mezőt (onFocus= ), akkor megjelenik annak tartalma, és ezáltal tudtára hozzuk, hogy mit kívánunk tőle.

onKeydown

Az esemény akkor keletkezik, ha a felhasználó nyomvatartott billentyű mellett kiválaszt egy elemet.

A Netscape megadása szerint HTML tag-ben nem, csupán a JavaScript event objektumával együtt lehet alkalmazni.

A HTML 4.0 szabványa szerint a következő HTML tag-ben fordulhat elő :<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function frissit(){
 document.teszt.kijelzo.value
  = document.Teszt.szoveg.value.length + 1 +" jel megadva";
 return true;
} 
</script>
</head><body>
<form name="teszt">
Röviden mutassa be önmagát (max. 200 karakter):<br>
<textarea rows=5 cols=32 name="szoveg" onKeydown="frissit(this.value)">
</textarea><br>
<input type=text readonly size=32 name="kijelzo"><br><br>
<input type=reset value="Törlés">
</form>
</body></html>

Magyarázat:

A példa a Netscape böngészőivel nem, csak a MS Internet Explorer 4.x alatt működik. Ez utóbbi eseménykezelése megfelel a HTML 4.0 szabványnak.

A példában az űrlapon egy többsoros beviteli mezőt definiáltunk, melyben a felhasználó röviden bemutathatja önmagát. Azért, hogy ne kelljen számolnia, hány karaktert vitt be, egy egysoros beviteli mezőben, melyet csak olvashatóvá tettünk, megjelenítjük a begépelt jelek számát.

onKeypress

Az esemény akkor keletkezik, ha a felhasználó lenyom majd felenged egy billentyűt.

A Netscape megadása szerint HTML tag-ben nem, csupán a JavaScript event objektumával együtt lehet alkalmazni.

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="Teszt">
<input type=text size=30 name="bevitel"
  onKeypress="alert(window.event.keyCode)">
</form>
</body></html>

Magyarázat:

A példa a Netscape böngészőivel nem, csak a MS Internet Explorer 4.x alatt működik. A példában a lenyomott majd elengedett billentyű ASCII kódját jelenítjük meg egy üzenőablakban.

onKeyup

Az esemény akkor keletkezik, ha a felhasználó felenged egy billentyűt.

A Netscape megadása szerint HTML tag-ben nem, csupán a JavaScript event objektumával együtt lehet alkalmazni.

A HTML 4.0 szabványa szerint a következő HTML tag-ben fordulhat elő :<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="Teszt">
Bevitel : <input type=text size=32 name="bevitel"
  onKeyup="this.form.kijelzo.value=this.value"><br><br>
Kijelzés: <input type=text readonly size=32 name="kijelzo"><br><br>
<input type=reset value="Törlés">
</form>
</body></html>

Magyarázat:

A példa a Netscape böngészőivel nem, csak a MS Internet Explorer 4.x alatt működik. A példában az eseménykezelőt a beviteli mezőben jegyezzük be, mely abban a pillanatban válik aktívvá, amikor a billentyűt elengedjük, így a beviteli mező tartalmát átírjuk a kijelző mezőbe.

onLoad

Az esemény a HTML fájl betöltésekor keletkezik.

A HTML 4.0 szabványa és a Netscape megadása szerint következő HTML tag-ben fordulhat elő: <frameset> <body>

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function ujablak(){
 nyitas = window.open("nyitas.htm","nyitas","height=220,width=440");
 nyitas.focus();
}
</script></head>
<body onLoad="ujablak()">
</body></html>

Magyarázat:

A példában a HTML fájl betöltésekor egy új ablakot nyitunk, melyben egy másik HTML fájlt jelenítünk meg. Az eseménykezelő a hívó fájl testrészében van jegyezve, mely meghívja az ujablak()nevű saját készítésű függvényt , mely a hívó fájl fejrészében látható. Az újonnan betöltött ablakra tesszük a fókuszt, ezáltal az lesz aktív.

onMousedown

Az esemény akkor keletkezik, ha a felhasználó nyomva tart egy egérbillentyűt.

A Netscape megadása szerint HTML tag-ben nem, csupán a JavaScript event objektumával együtt lehet alkalmazni. A példa ennek ellenére a Netscape 4.x alatt jól fut.

Példa:

<html><head><title>Teszt</title>
</head><body>
<a href="nyitas.htm" onMousedown=
"window.status='JavaScript nyitólap';return true;">A nyitólaphoz visz</a>
</body></html>

Magyarázat:

A példában a státuszsorban megjelenítünk egy szöveget. Az esemény tart, míg a felhasználó az egér gombját nyomva tartja. Az eseménykezelőt : <a href= >tag-be jegyeztük be.

onMousemove

Az esemény akkor keletkezik, ha a felhasználó az egeret mozgatja, illetve áthúzza az egérkurzort az elem felett.

A Netscape megadása szerint HTML tag-ben nem, csupán a JavaScript event objektumával együtt lehet alkalmazni.

<html><head><title>Teszt</title>
<script language="JavaScript">
function eger_kontroll(){
 Pos = window.event.x + "/" + window.event.y;
 window.status = Pos;
 return true;
}
</script>
</head><body>
<p onMousemove="eger_kontroll()">Az itt a szöveg helye</p>
</body></html>

Magyarázat:

A példa a Netscape böngészőivel nem, csak a MS Internet Explorer 4.x alatt működik. A példában az onMousemove= eseménykezelőt a <p> tag-ben jegyeztük be. Ha a szöveg felett áthúzzuk az egérkurzort ( függetlenül attól, hogy az egérbillentyűt lenyomtuk vagy sem), egy esemény generálódik, mely meghívja az eger_kontroll()nevű saját készítésű függvényt mely a fejrészében található. Ez kiírja a státuszsorba az egér aktuális pozicióját.

onMouseout

Az esemény akkor keletkezik, ha a felhasználó az egeret az elemről elviszi.

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <a> <area>

A HTML 4.0 szabványa szerint a következő HTML tag-ben fordulhat elő :<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var>

Példa:

<html><head><title>Teszt</title>
</head><body>
<a href="nyitas.htm"
onMouseout="alert('JavaScript ismeretek')">A JavaScript nyitólaphoz</a>
</body></html>

Magyarázat:

A példában egy hivatkozási szöveget mutatunk. Ha az egérkurzort elvisszük a szövegről, akkor az aktiválja az onMousout= eseménykezelőt.

onMouseover

Az esemény akkor keletkezik, ha a felhasználó az egérkurzort az elemre mozgatja.

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <a> <area>

Példa:

<html><head><title>Teszt</title>
</head><body>
<h2 id="Teszt"
 onMouseover="document.all.Teszt.innerText='Változik a kiírás'"
 onMouseout="document.all.Teszt.innerText='Na látja ? '">
Dinamika = változás </h2>
</body></html>

Magyarázat:

A példa a Netscape böngészőivel nem, csak a MS Internet Explorer 4.x alatt működik. A példában az onMouseover= és az onMouseout=eseménykezelőket a <h2> tag-ben adtuk meg. Az egérnek a szövegre és onnan el történő mozgatásakor a kiírás dinamikusan változik.

onMouseup

Az esemény akkor keletkezik, ha a felhasználó az egér gombját elengedi.

A Netscape megadása szerint HTML tag-ben nem, csupán a JavaScript event objektumával együtt lehet alkalmazni. A példa ennek ellenére a Netscape 4.x alatt is jól fut.

Példa:

<html><head><title>Teszt</title>
</head><body>
<a href="nyitas.htm" onMouseup=
"alert('JavaScript');window.location.href='nyitas.htm';">JavaScript oktató</a>
</body></html>

onReset

Az esemény akkor keletkezik, ha a felhasználó a Reset (törlés) gombot megnyomja, ezáltal az űrlapon levő összes mező újra inicializálódik.

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <form>

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function ResetCheck(){
 valasz = window.confirm("Valóban törli az adatokat ?");
 return valasz;
}
</script>
</head><body>
<form name="Teszt" onReset="return ResetCheck()">
Név: <input size=32><br>
Hobby: <input size=32><br>
<input type=reset value="Törlés">
<input type=submit value="Elküld">
</form>
</body></html>

Magyarázat:

A példában az űrlapon két beviteli mezőt egy elküldő és egy tőrlő gombot definiáltunk. Az onReset=eseményfigyelés a <form> tag-ban van jegyezve. Ha a felhasználó megnyomja a töröl gombot, akkor a kérdéses esemény bekövetkezik. Meghívjuk a ResetCheck() nevű saját készítésű függvényt mely a HTML fájl fejrészében található. Ha a függvény visszatérő értéke true, azaz megerősítette szándékát a törlést illetően, akkor eldobjuk a bevitt adatokat.

onSelect

Az esemény akkor keletkezik, ha a felhasználó kiválaszt egy szöveget.

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <input> <textarea>

Példa:

<html><head><title>Teszt</title>
</head><body>
<form name="Teszt">
<input size=32 value="Akácos út,ha végigmegyek rajtad én.."
 onselect="this.blur()">
</form>
</body></html>

Magyarázat:

A példában az űrlapon egy mezőt definiáltunk. Az onSelect=eseményfigyelés az <input> tag-ban van jegyezve. Ha a felhasználó megkíséreli a mező szövegét kijelölni, akkor a fókuszt elvisszük onnan a blur() metódus hívásával.

onSubmit

Az esemény akkor keletkezik, ha a felhasználó elküldi az űrlapot.

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <form>

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
function CheckInput(){
 for(i=0; i<document.forms[0].elements.length; ++i)
  if(document.forms[0].elements[i].value == ""){
    alert("Nincs minden mező kitöltve!");
	document.forms[0].elements[i].focus();
	return false;
    }
  return true; 
}
</script>
</head><body>
<form onSubmit="return CheckInput();">
Név : <input size=32><br>
Szül.hely: <input size=32><br>
Szül.idő : <input size=32><br>
<input type=reset value="Törlés">
<input type=submit value="Elküld">
</form>
</body></html>

Magyarázat:

A példában az űrlapon több beviteli mezőt egy elküldő és egy tőrlő gombot definiáltunk. Az onSubmit=eseményfigyelés a <form> tag-ban van jegyezve. Ha a felhasználó megnyomja az elküld gombot, akkor a kérdéses esemény bekövetkezik. Meghívjuk a CheckInput() nevű saját készítésű függvényt , mely a HTML fájl fejrészében található.A függvény visszatérő értéke true, ha minden mezőben van valami bevitt érték, így az űrlap adatai el lesznek küldve.

onUnload

Az esemény akkor keletkezik, ha a felhasználó elhagyja a HTML fájlt.

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <frameset> <body>

Példa:

<html><head><title>Teszt</title>
<script language="JavaScript">
kezd = new Date();
kezdo_ido = kezd.getTime();
function vizsgal(){
 vegez = new Date();
 vegzo_ido = vegez.getTime();
 eltelt = Math.floor((vegzo_ido - kezdo_ido) / 1000);
 alert("Ön összesen " + eltelt + " másodpercet töltött ezen az oldalon");
}
</script></head>
<body onUload="vizsgal()">
</body></html>

Magyarázat:

A példa fejrészében egy JavaScript területet definiáltunk. A fájl betöltésekor egy Date objektumban eltároljuk a belépési időt. Az onUnload=eseményfigyelés a <body> tag-ban van jegyezve. Ha a felhasználó el kívánja hagyja az oldalt, akkor a egy esemény generálódik, melynek hatására meghívjuk a vizsgal()nevű saját készítésű függvényt , mely a HTML fájl fejrészében található. Ebben szintén lekérjük az aktuális időt. A kettő különbsége (osztva ezerrel) adja az eltel időt másodpercben számolva. Ezt megjelenítjük egy üzenőablakban, és mostmár valóban elhagyjuk az oldalt.

javascript:

Ez valójában nem egy eseménykezelő. Ezt a megoldást azért vezette be a Netscape, hogy egy JavaScript kódot hivatkozásként kezelhessen..

A Netscape megadása szerint következő HTML tag-ben fordulhat elő : <a> <area>

Példa:

<html><head><title>Teszt</title>
</head>
<body>
<a href="javascript:alert(document.lastModified)">Utoljára módosítva</a>
</body></html>

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

Event-Handler (Eseménykezelő)

Példa:

Példa:

Magyarázat:

Példa:

Példa:

Magyarázat:

Példa:

Magyarázat:

Figyelem:

Példa:

Példa:

Magyarázat:

Példa:

Magyarázat:

Példa:

Magyarázat:

Példa:

Magyarázat:

Példa:

Magyarázat:

Példa:

Magyarázat:

Magyarázat:

Példa:

Magyarázat:

Példa:

Magyarázat:

Példa:

Példa:

Magyarázat:

Példa:

Magyarázat:

Példa:

Magyarázat:

Példa:

Magyarázat:

Példa: