Eseménykezelők olyan programok,
melyek függvényhívással eseményeket kezelnek.
A programok nem mindig a <script> elemek között, helyezkednek el.
Az eseménykezelők megmondják a böngészőknek,
hogy mit kell tenni, ha az esemény bekövetkezik.
Például: lenyomják az egérbillentyűt, befejeződött a HTML dokumentum betöltése, stb.
Eseménykezelő meghatározást, az objektumhoz tartozó HTML elemben adjuk meg,
de meghatározhatjuk JavaScript programunkban is.
Eseménykezelő HTML oldalon | Esemény bekövetkezése | Kisbetűs JavaScript-hez |
---|---|---|
Mouse, azaz, egér események. | ||
onClick | - aktíválódik, ha a felhasználó rákattint a kiválasztott elemre. Egéresemény. Érvényes: a legtöbb elemre. | onclick |
onDblClick | - aktíválódik, ha a felhasználó kétszer rákattint a kiválasztott elemre. (többszörös kattintásnál az eseménysorozat mindig bekövetkezik, és a detail attribútum értéke minden kattintásnál megnövekszik egyel.) | ondblclick |
onMouseDown | - aktíválódik, amikor felhasználó kiválasztott elemen, lenyomja az egérbillentyűt. Egéresemény. Érvényes: a legtöbb elemre. | onmousedown |
onMouseUp | - aktíválódik, amikor felhasználó kiválasztott elemen, felengedi az egérbillentyűt. Egéresemény. Érvényes: a legtöbb elemre. | onmouseup |
onMouseOver onMouseEnter |
- aktíválódik, ha a felhasználó egérkurzot, kiválasztott területre mozgatja. Egéresemény. Érvényes: a legtöbb elemre. | onmouseover |
onMouseOut onMouseLeave |
- aktíválódik, ha a felhasználó az egérkurzorral elhagyja, kiválasztott területet. Egéresemény. Érvényes: a legtöbb elemre. | onmouseout |
onMouseMove | - aktíválódik, ha a felhasználó egérkurzort morgatja, kiválasztott területen. Egéresemény. Érvényes: a legtöbb elemre. | onmousemove |
onWheel | - aktíválódik, amikor az egér görgőjét felfelé / lefelé görgetik, kiválasztott területen. Egéresemény. Érvényes: a legtöbb elemre. | onwheel |
Mouse, azaz, egéreseményekről bővebben és tesztelésükhöz, katt ide. | ||
Keyboard, azaz, billentyűzeti események. | ||
onKeyDown | - aktíválódik, billentyűzeten bármelyik billentyűt, lenyomják. | onkeydown |
onKeyUp | - aktíválódik, billentyűzeten lenyomott billentyűt, felengedik. | onkeyup |
Klaviature, billentyűzeti eseményekről bővebben és tesztelésükhöz, katt ide. | ||
Űrlapon történő események. | ||
onKeyPress | - aktíválódik, ha a felhasználó beír valamit az űrlapmezőbe. | onkeypress |
onSelect | - aktíválódik, ha a felhasználó kiválaszt valamilyen szöveget az űrlapon. Formokra vonatkozó esemény. Érvényes: INPUT, TEXTAREA elemekre. | onselect |
onFocus | - aktíválódik, ha a felhasználó kiválaszt valamilyen elemet az űrlapon. Formokra vonatkozó esemény. Érvényes: LABEL, INPUT, SELECT, TEXTAREA, és BUTTON elemekre. | onfocus |
onBlur | - aktíválódik, ha a felhasználó elhagyja az elözőleg "fókuszált" űrlapmezőt. Formokra vonatkozó események Érvényes: LABEL, INPUT, SELECT, TEXTAREA, és BUTTON elemekre. | onblur |
onSubmit | - aktíválódik, ha a felhasználó rákattint az űrlap küldőgombjára. Formokra vonatkozó esemény. Érvényes: Csak FORM elemre. | onsubmit |
onReset | - aktíválódik, ha a felhasználó megsemmisíti, törli ürlapmezők tartalmát. Formokra vonatkozó esemény. Érvényes: Csak FORM elemre. | onreset |
onChange | - aktíválódik, ha a felhasználó megváltoztatja űrlapon, az értéket. Formokra vonatkozó események Érvényes: INPUT, SELECT, és TEXTAREA elemekre. | onchange |
Dokument események. | ||
onLoad | - aktíválódik, ha a böngésző beolvassa a Weboldalt, a body elemmel használható. oldal egészére vonatkozó esemény | onload |
onUnload | - aktíválódik, ha az adott objektum bezárul (lecserélődik). Érvényes: BODY, FRAMESET elemekre. | onunload |
onAbort | Akkor következik be, ha oldal betöltése megszakadt. Objektumszintű esemény Érvényes: objektum elemekre. | onabort |
onError | Akkor következik be, ha hiba van az oldal betöltés során. Pl: A képfájl nem található, vagy sérült. Objektumszintű esemény Érvényes: OBJEKTUM, BODY, IMAGE, FRAMESET elemekre. | onerror |
onResize | Akkor következik be, ha dokumentum mérete megváltozik. Pl: (Felhasználó megváltoztatja böngészőablak méretét.) Objektumszintű (document) esemény. | onresize |
onScroll | Akkor következik be, ha a dokumentumot görgetősávval görgetik. Objektumszintű (document, body, div) esemény. Kiválasztott div elem tulajdonsághoz, határozzuk meg a overflow: scroll; meghatározást. | onscroll |
Érintési események. (csak érintőképernyők esetén) | ||
ontouchstart |
Akkor következik be, ha felhasználó megérint, egy elemet. | |
ontouchend |
Akkor következik be, ha felhasználó eltávolítja az ujját, egy elemről. | |
ontouchmove |
Akkor következik be, ha felhasználó az ujját, a képernyőn mozgatja. | |
ontouchcancel |
Érintéstörlési esemény, bekövetkezik ha érintési esemény megszakad. |
Eseménykezelőt elhelyezhetünk majdnem minden jelölőelem kezdő címkéjében.
Nem helyezhetünk el, például a következő elemekben: <hr> <br> <wbr>
Eseménykezelőt olyan elemekben helyezzünk el, melyek tartalommal is rendelkeznek és button gombokhoz, vagy űrlap és annak elemeihez.
Eseménykezelők, esemény bekövetkezésekor, egy JavaScript function függvényt hívnak meg, melyben meghatározhatjuk, mi történjen esemény bekövetkezésekor.
Egy kiválasztott jelölőelemnél meghatározható, egy vagy több eseménykezelő is, html oldalon vagy javaScript fájlban.
Minták: Div elem területén, kattintási esemény: <div onClick="függvény_neve();"> Tartalom. </div> Div elem területére, érkezési / elhagyási esemény: <div onMouseOver="érkezési_függvény_neve();" onMouseOut="elhagyási_függvény_neve();"> Tartalom. </div> Div elem területére, érkezési / kattintási / elhagyási esemény: <div onMouseOver="érkezési_függvény_neve();" onClick="kattintási_függvény_neve();" onMouseOut="elhagyási_függvény_neve();"> Tartalom. </div> Div elem területére, érkezési / kattintási / görgetési / elhagyási esemény: <div onMouseOver="érkezési_függvény();" onClick="kattintási_függvény();" onWheel="görgetési_függvény();" onMouseOut="elhagyási_függvény();"> Tartalom. </div>
Példa, amikor nem kell JavaScript function meghívást alkalmazni eseménykezelőhöz.
Ekkor, üzemőablak jelenik meg.
Minták:
Megjegyzés:
Egy kiválasztott elemhez, egy vagy kettő eseménykezelőt határozzunk meg, és mindig teszteljük
végleges felhasználásuk előtt.
Például:
Területre érkezés és a kattintási esemény párosítása, nem várt eseményt okozhat.
A területre érkezésre több eseménykezelő is van, melyek más-más alapon működnek.
1. Példában:
Eseménykezelők html oldalon kiválasztott, jelölőelem kezdő címkéjében vannak meghatározva,
hozzájuk tartozó függvényhívással.
2. Példában:
Eseménykezelők JavaScript területén vannak meghatározva,
hozzájuk tartozó függvényhívással.
Stílus meghatározás: #esemenyek{width:97%; margin-right:auto; margin-left:auto; font-size:13.5px; padding:8px; border:3px solid black; background-color: white;}
<h3> Területi esemény: <span id="esemenyuzenetek"></span> </h3> <div id="esemenyek" onMouseOver="erkezes();" onClick="kattintas();" onWheel="gorgetes();" onMouseOut="tavozas();"> <br> Ezen a kiválasztott területen,<br> négy (4) eseményt tesztelünk.<br> Érkezés, kattintás, görgetés, távozás. <br><br> Eseménykezelők<br> Kiválasztott jelölőelem kezdő cimkéjében vannak meghatározva,<br> hozzájuk tartozó függvényhívással.<br> <br><br><br><br> </div>
<script> // Eseményekhez tartozó függvények meghatározásai. ------------------------------ function erkezes(){ var id = document.getElementById('esemenyuzenetek'); id.innerHTML ='Érkezés!';
var belep = document.getElementById('esemenyek'); belep.style.border="15px ridge coral"; belep.style.backgroundColor="beige"; } // ------------------------------------------------------------------------ function kattintas(){ var id = document.getElementById('esemenyuzenetek'); id.innerHTML ='Kattintás!';
var kattint = document.getElementById('esemenyek'); kattint.style.border="15px ridge blueviolet"; kattint.style.backgroundColor="lightcyan"; } // ------------------------------------------------------------------------- function gorgetes(){ var id = document.getElementById('esemenyuzenetek'); id.innerHTML ='Görgetés!';
var gorget = document.getElementById('esemenyek'); gorget.style.border="15px ridge fuchsia"; gorget.style.backgroundColor="beige"; } // ------------------------------------------------------------------------- function tavozas(){ var id = document.getElementById('esemenyuzenetek'); id.innerHTML = 'Távozás!';
var tavozik = document.getElementById('esemenyek'); tavozik.style.border="3px solid black"; tavozik.style.backgroundColor="white"; } </script>
Eseménykezelők JavaScript programban vannak elhelyezve.
<h3> Területi esemény: <span id="js_uzenetek"></span> </h3> <div id="jsesemenyek"> <br> Ezen a kiválasztott területen,<br> négy (4) eseményt tesztelünk.<br> Érkezés, kattintás, görgetés, távozás. <br><br> Eseménykezelők:<br> JavaScript területén vannak meghatározva,<br> hozzájuk tartozó függvényhívással.<br> <br><br><br><br> </div>
<script> // Terület beazonosítása és eseménykezelők meghatározása. --------------------------- var js_esemeny = document.getElementById('jsesemenyek'); js_esemeny.onmouseover = js_erkezes; js_esemeny.onclick = js_kattintas; js_esemeny.onwheel = js_gorgetes; js_esemeny.onmouseout = js_tavozas; // -------------------------------------------------------- function js_erkezes(){ var id = document.getElementById('js_uzenetek'); id.innerHTML = 'Érkezés!'; js_esemeny.style.border="15px ridge coral"; js_esemeny.style.backgroundColor="beige"; } // -------------------------------------------------------- function js_kattintas(){ var id = document.getElementById('js_uzenetek'); id.innerHTML = 'Kattintás!'; js_esemeny.style.border="15px ridge blueviolet"; js_esemeny.style.backgroundColor="lightcyan"; } // -------------------------------------------------------- function js_gorgetes(){ var id = document.getElementById('js_uzenetek'); id.innerHTML = 'Görgetés!'; js_esemeny.style.border="15px ridge fuchsia"; js_esemeny.style.backgroundColor="beige"; } // -------------------------------------------------------- function js_tavozas(){ var id = document.getElementById('js_uzenetek'); id.innerHTML = 'Távozás!'; js_esemeny.style.border="3px solid black"; js_esemeny.style.backgroundColor="white"; } </script>
Az onscroll esemény akkor következik be, amikor egy elem görgetősávját görgetik.
Használjuk a CSS túlcsordulási stílus tulajdonságot overflow: scroll; egy kiválasztott elemnél, görgetősáv létrehozásához.
Használhatjuk görgetéshez, az egér görgetőjét is. Ekkor előfordulhat némelyik böngészőnél, hogy egérgörgetés előtt, kattintani kell a kijelölt területen.
Tartamom olvasásához, mozgassuk a div elem óldalsó és alsó görgetősávját.
Teszt minta. Melynek tartalma, a kijelölt területen nem fér el, áttekintéséhez mozgatni kell tartalmat le-fel és jobbra-balra a görgetősávokkal.
<style> #srollteszt { border: 1px solid black; width: 600px; height: 300px; padding-left: 10px; margin-right: auto; margin-left: auto; overflow: scroll; } </style></head>
<p>
A onscroll esemény akkor következik be, amikor egy elem görgetősávját görgetik.
Használjuk a CSS túlcsordulási stílus tulajdonságot overflow: scroll; egy kiválasztott elemnél, görgetősáv létrehozásához.
</p>
Használhatjuk görgetéshez, az egér görgetőjét is. Ekkor előfordulhat némelyik böngészőnél, hogy egérgörgetés előtt, kattintani kell a kijelölt területen.
<pre> Ez egy pre elem területén elhelyezett szövegsor, mely tartalmának végig olvasásához, az alsó görgetősávval mozgatni kell, balra és jobbra a tartalmat. </pre>
</div> <p>Scroll, azaz, görgetések száma: <span id="scrollkiiras">0</span></p> <p>Görgetés:<br> Top pozíciója = <span id="topscrolpozicio">0</span><br> Left pozíciója = <span id="leftscrolpozicio">0</span> </p>
<script> let x = 0; function scrollEsemeny() { document.getElementById("scrollkiiras").innerHTML = x += 1; var TopScroll=document.getElementById("srollteszt").scrollTop; document.getElementById("topscrolpozicio").innerHTML =TopScroll; var LeftScroll=document.getElementById("srollteszt").scrollLeft; document.getElementById("leftscrolpozicio").innerHTML =LeftScroll; } </script>
</div> </body>
Scroll, azaz, görgetések száma: 0
Görgetés:
Top pozíciója = 0
Left pozíciója = 0
Gyakran alkalmazzuk szövegfolyamokban.
Kezdő <span> jelölőelemben elhelyezett, esemény meghatározást.
A <span> jelölőcímkével, tetszőleges szövegrészt kijelőlhetünk, és dokumentumunk szövegfolyamában, tetszőleges helyen, azaz, szövegrésznél elhelyezhetjük.
Megírása html fájlban.
<p>
Ez egy szövegrész, azaz szövegfolyam.
Tetszőleges szövegrészt jelöljünk ki a <span> címkével, azaz jelölőelemmel.
A kezdő <span> címkében helyezzük el az eseménykezelőt, így az adott esemény, csak a kijelőlt szövegrészre vonatkozik.
<span class="sargahatter" onMouseOver="alert('Ön, egy kijelölt szövegrészre mozgatta egérkurzort. \nAz eseménykezelő, bemutató példának lett létrehozva.'); "> Teszteléshez mozgasd ide, az egérmutatót! </span>
Ha a kezdő span címkéhez id egyedi vagy class osztályazonosítót is beírunk, akkor a CSS, azaz, a stíluslapon meghatározhatjuk annak megjelenési formáját is.
</p>
Megjelenése weboldalon:
Ez egy szövegrész, azaz szövegfolyam.
Tetszőleges szövegrészt jelöljünk ki a <span> címkével, azaz jelölőelemmel.
A kezdő <span> címkében helyezzük el az eseménykezelőt, így az adott esemény, csak a kijelőlt szövegrészre vonatkozik. Teszteléshez mozgasd ide, az egérmutatót! Ha a kezdő span címkéhez id egyedi vagy class osztályazonosítót is beírunk, akkor a CSS, azaz, a stíluslapon meghatározhatjuk annak megjelenési formáját is.
<img src="takarekos_izzo.jpg" width="100" height="55" onMouseOver="alert('Ez a kép bemutató jelleggel készült. De fotóinkról hosszabb - rövidebb leírást is készíthetünk, egy adott üzenőablakba.'); " >
Megjelenése a böngészőben: ( Egérkurzort mozgassuk a képre. )
Ezen ablak kétfunkciós, a megjelenő ablakban üzenetet jeleníthetünk meg a felhasználó felé, és döntés elé állíthatjuk, hogy marad e a jelenlegi weboldalon, vagy elhagyja ezen weboldalt és kilép.
Az OK gomra kattintva kilép, a MÉGSE(cancel) gombra kattintva marad.
A confirm ablakot, hivatkozásokra, azaz linkekre alkalmazzuk, a hivatkozás lehet képhivatkozás is, nem csak szöveges.
<a href="index.html" onClick="return (window.confirm('Ez egy képhivatkozás, azaz link! Biztos kiakarsz lépni ezen weboldalról? Ha igen, akkor a következő weboldalra jutsz, témakörök tartalomjegyzéke'));"> <img src="pkepek/villany200x110.jpg" width="100" height="55"/> </a>
Megjelenése a böngészőben, kattints a képre:
Az alert üzenőablak helyett, egy hosszabb leírást akarunk mellékelni a képhez, megtehetjük úgy is, hogy JavaScript programunkban írjuk meg a szöveget, majd ezen szöveget tároló függvényt hívjuk meg, a szöveg megjelenítéséhez.
Példa egy képre:
Meghatározzuk eseménykezelőt, és a szöveget tároló függvény nevét.
<img src="takarekos_izzo.jpg" width="100" height="55" onMouseOver="KepInfo(); " >
Példa:
<button onClick="history.back();"> Vissza.<br> <-- Back </button>
<button onClick="history.forward();"> Előre.<br>Forward --> </button>
A fenti kódrészlet eredménye, a böngészőprogramban:
A dokumentum előtt és utána nézett, címek listája. history
- back() visszalép egyet.
- forward() előrelép egyet.