Események, eseménykezelők

Oldalon általam elhelyezett adathalászat, cookie nincs!

A HTML dokumentumokban, a következő eseményeket (events) használhatjuk

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ő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:

Kettő tesztelhető eseménykezelő példa.

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.

1. Példa.

Területi esemény:

1. Példa leírása:

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>

2. Példa.

Eseménykezelők JavaScript programban vannak elhelyezve.

Területi esemény:

2. Példa leírása:

<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>

A görgetősávos esemény.

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.

   <style>
       #srollteszt {
           border: 1px solid black;
            width: 600px;
           height: 300px;
   padding-left: 10px;
   margin-right: auto; 
     margin-left: auto;
         overflow: scroll;
        }
   </style>

<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>

További néhány példa.

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.

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.

A következő példában, egy adott képhez - fotóhoz tartozó eseménykezelőt helyezünk el.

Megjelenése a böngészőben: ( Egérkurzort mozgassuk a képre. )

Másik példa: Hivatkozási linkhez, a confirm üzenőablakot rendeljük.

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 következő példában egy képhivatkozást láthatunk, melyhez a confirm üzenőablakot társítjuk.

<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(); " >

Előre és visszaugró gombok létrehozása.

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:

Vissza.
<-- Back Előre.
Forward -->

A dokumentum előtt és utána nézett, címek listája. history
- back() visszalép egyet.
- forward() előrelép egyet.

Vissza a lap elejére