JavaScript események (JS event magyarul)

Ebben a cikkben a JavaScript eseményeket fogjuk bemutatni. Elmagyarázzuk, hogy mik is pontosan azok az eventek, mire valók és hogy melyek a leggyakoribb JavaScript események. Minden esemény megvalósításához mutatunk szintaktikát és példát.

0
Ingyenes JavaScript leckék, magyarul - JavaScript bejegyzések borítóképe

JavaScript események (JS event magyarul)

Ebben a cikkben a JavaScript eseményeket fogjuk bemutatni. Elmagyarázzuk, hogy mik is pontosan azok az eventek, mire valók és hogy melyek a leggyakoribb JavaScript események. Természetesen minden esemény megvalósításához mutatunk szintaktikát és példát.

Tartalomjegyzék

Mi az a JavaScript esemény (JS event)?

A JavaScript események egy esemény bekövetkezésekor történnek meg. Ezeket az eseményeket mi állíthatjuk be. Különböző események történését figyelhetjük, csak hogy párat említsünk a teljesség igénye nélkül: kattintás, görgetés, billentyűleütés.

Ezen események bekövetkezésekor különböző JavaScript utasításokat futtathatunk. Összefoglalva eseményekhez köthetjük különböző JavaScript kódok futtatását. Azaz, ha a böngésző észleli, hogy esemény megtörtént, akkor érvénybe lépteti a hozzárendelt JS kódot.

Ez azért nagyon jó, mert például figyelhetjük azt, hogy a felhasználó görget a weboldalon és ha elért a weboldal 80%-áig, akkor például elkérhetjük tőle az email címét.

JavaScript esemény, event általános szintaxisa

Ezen eventek bekövetkezését többféleképpen is lehet figyelni:

  • HTML nyelvben
  • JavaScript nyelvben
  • JavaScript nyelvben addEventListener() metódus segítségével

HTML nyelv szintaxis:

<ELEM ESEMÉNY="JAVASCRIPT UTASÍTÁS">
Code language: HTML, XML (xml)

JavaScipt szintaxis:

ELEM.ESEMÉNY= function(){FÜGGVÉNYNÉV};
Code language: JavaScript (javascript)

JavaScript szintaktika addEventListener() metódus segítségével

ELEM.addEventListener("ESEMÉNY", function(){FÜGGVÉNYNÉV});
Code language: JavaScript (javascript)

Mind a három példában meg kell adnunk, hogy milyen esemény bekövetkezését szeretnénk figyelni, majd azt, hogy mi történjen, akkor ha bekövetkezik a figyelt esemény.

Az alábbi példákban és szintaxisoknál mi a HTML nyelv szerinti szintaktikát fogjuk alkalmazni, mert úgy gondoljuk, hogy az a leggyorsabb és a legegyszerűbb módszer. De természetesen mind a három módszerrel megoldható minden eseménykezelés.

JS eseménytípusok

Rengeteg eseménytípus létezik, de nézzünk meg párat a gyakrabban használtak közül.

Esemény elnevezéseEsemény bekövetkezése
onchangeha egy HTML elem megváltozik
onclick/ondblclickha a felhasználó rákattint egyszer/kétszer egy HTML elemre
onmouseover/onmouseoutha a felhasználó ráhúzza/lehúzza az egerét egy HTML elemre/elemről
onkeypressha a felhasználó lenyom egy karaktert a billentyűzetén
onloadha a böngésző betöltötte a weboldalt
oncopy/oncut/onpasteha a felhasználó másolt/kivágott/beillesztett valamit

Természetesen a lista itt még nem ér véget, ezen a linken még több HTML esemény attribútumot találhattok.

JS onchange event/esemény

A JavaScript onchange esemény egy HTML elem megváltozásakor következik be. Célszerű vele például egy űrlap beviteli mezőjét figyelni.

JS onchange event/esemény szintaxis

<ELEM onchange="FÜGGVÉNYNÉV/JS.KÓD">
Code language: HTML, XML (xml)

JS onchange event/esemény példa

JavaScript + HTML kód

<!DOCTYPE html>
<html>
<body>
<p>A név beírása után kattints ki a bevitelimezőből.</p>
Írd ide a neved: <input type="text" id="nev" onchange="nevCsere()">

<script>
function nevCsere() {
  document.getElementById("nev").value = "Úgyis átírom. Hahaha.";
}
</script>

</body>
</html>

Code language: HTML, XML (xml)

Eredmény

A név beírása után kattints ki a bevitelimezőből.

Írd ide a neved:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

JS onclick, ondblclickevent/esemény

A JavaScript onclick esemény egy HTML elemre való egyszeri kattintáskor következik be, míg az ondblclick a dupla kattintáskor. Ezeket általában gombokra szokták alkalmazni, de nyugodtan helyezhetjük őket más elemekre is, például egy szövegre.

JS onclick, ondblclick event/esemény szintaxis

<ELEM onclick/ondblclick="FÜGGVÉNYNÉV/JS.KÓD">
Code language: HTML, XML (xml)

JS onclick, ondblclick event/esemény példa

JavaScript + HTML kód

<!DOCTYPE html>
<html>
<body>
szám1: 5 <br> szám2: 3 <p id="szoveg"></p>
<button id="gomb" onclick="osszead(5,3)" ondblclick="kivon(5,3)">Egy kattintással összead, kettővel kivon.</button>

<script>
function osszead(szam1, szam2) {
  document.getElementById("szoveg").innerHTML = szam1 + szam2;
}

function kivon(szam1, szam2) {
  document.getElementById("szoveg").innerHTML = szam1 - szam2;
}
</script>

</body>
</html>
Code language: HTML, XML (xml)

Eredmény

szám1: 5
szám2: 3


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

JS onmouseover/onmouseout event/esemény

Az onmouseover esemény érzékeli, hogy a felhasnzáló mikor húzza az egerét egy HTML elemre, míg az onmouseout azt figyeli, hogy mikor húzza le az egerét a HTML elemről.

JS onmouseover/onmouseout event/esemény szintaxis

<ELEM onmouseover/onmouseout="FÜGGVÉNYNÉV/JS.KÓD">
Code language: HTML, XML (xml)

JS onmouseover/onmouseout event/esemény példa

JavaScript + HTML kód

<!DOCTYPE html>
<html>
<body>

<p>Húzd az egeret a gomra.</p>
<button onmouseover="rahuz(this)" onmouseout="lehuz(this)">Gomb</button>

<script>
function rahuz(elem) {
  elem.style.backgroundColor = "red";
}

function lehuz(elem) {
  elem.style.backgroundColor = "yellow";
}
</script>

</body>
</html>
Code language: HTML, XML (xml)

Eredmény

Húzd az egeret a gomra.


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Itt fontos megjegyezni, hogy a „rahuz()” és a „lehuz()” függvények meghívásánál mit jelent a „this” kulcsszó. Ezzel tulajdonképen azt mondjuk meg a függvényünknek, hogy erről az elemről beszélünk, amelyből meghívtuk a függvényt. Ez azért egy kiváló megoldás, mert nem kell azzal foglalkoznunk, hogy ID alapján keressük meg a használni kívánt elemet a HTML dokumentumunkban, mint például ebben az esetben.

A példában azt állítottuk be, hogy ráhúzáskor legyen piros a gomb, lehúzáskor pedig sárga. Míg nem érünk hozzá addig az alapértelmezetten beállított gombszínt tartja meg.

JS onkeypress event/esemény

Az onkeypress event, esemény a felhasználó billentyűzetét figyeli és akkor aktiválódik, amikor a felhasználó lenyomott egy karaktert.

JS onkeypress event/esemény szintaxis

<ELEM onkeypress="FÜGGVÉNYNÉV/JS.KÓD">
Code language: HTML, XML (xml)

JS onkeypress event/esemény példa

JavaScript + HTML kód

<!DOCTYPE html>
<html>
<body>

<p>Nyomj le egy billentyűt a bevitelimezőben.</p>
<input type="text" onkeypress="billentyu()">

<p id="szoveg"></p>

<script>
function billentyu() {
  var szoveg="";
  document.getElementById("szoveg").innerHTML += "Leütöttél egy billentyűt.<br>";
}
</script>

</body>
</html>

Code language: HTML, XML (xml)

Eredmény

Nyomj le egy billentyűt a bevitelimezőben.


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

JS oncopy, oncut, onpaste event/esemény

Az oncopy a másolás, az oncut a kivágás, míg az onpaste a bemásolás tényét figyeli.

JS oncopy/oncut/onpaste event/esemény szintaxis

<ELEM oncopy/oncut/onpaste="FÜGGVÉNYNÉV/JS.KÓD">
Code language: HTML, XML (xml)

JS oncopy/oncut/onpaste event/esemény példa

JavaScript + HTML kód

<!DOCTYPE html>
<html>
<body>

<p>Másold ki, illeszd be vagy vágd ki az alábbi szöveget.</p>
<input type="text" oncopy="masol()" onpaste="beilleszt()" oncut="kivag()" value="Szöveg...">

<p id="szoveg"></p>

<script>
function masol() {
  document.getElementById("szoveg").innerHTML = "Most kimásoltad a szöveget."
}

function beilleszt() {
  document.getElementById("szoveg").innerHTML = "Most beillesztetted a szöveget."
}

function kivag() {
  document.getElementById("szoveg").innerHTML = "Most kivágtad a szöveget."
}
</script>

</body>
</html>

Code language: HTML, XML (xml)

Eredmény

Másold ki, illeszd be vagy vágd ki az alábbi szöveget.


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!

További leckék