szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript|< JavaScript]]

====== A JavaScript eseménykezelés ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Események =====

Minden elemhez egy eseményt köthetünk, amelyre egy JavaScript kóddal reagálhatunk.
Az alábbi táblázat a használható események neveit és leírásukat tartalmazza.

^  Tulajdonság  ^  Az esemény bekövetkezése  ^
| onblur | az elem elveszti a fókuszt |
| onchange | egy mező elhagyja a fókuszt és a tartalma megváltozik (onblur felülírja) |
| onclick | egérkattintások az objektumon |
| ondblclick | dupla-kattintás egy objektumon |
| onerror | egy lap vagy egy kép betöltésekor hiba keletkezik | 
| onfocus | egy elem megkapja a fókuszt |
| onkeydown | egy billentyűt lenyomtak |
| onkeypress | ELAVULT -- egy billentyűt lenyomtak vagy felengedtek |
| onkeyup | egy billentyűt elengedtek |
| onload | egy oldal vagy egy kép letöltése végetért |
| onmousedown | az egérgobot lenyomták |
| onmousemove | az egér mozog |
| onmouseout | az egér elhagyja az elemet |
| onmouseover | az egér egy elem felé kerül |
| onmouseup | az egérgombot felengedték |
| onresize | az ablak átméretezése |
| onselect | a szöveg ki lett jelölve |
| onunload | az oldal lehagyása, például ablak bezárása |




A következő mintában az onclick, az onchange és onfocus eseményeket tesztelheted:
<html>
<div id="kisdoboz">doboz</div>
<input type="text">

<input type="text" value="Ezen próbáld"

onclick="
document.getElementById('kisdoboz').style.color = 'white';
document.getElementById('kisdoboz').style.backgroundColor = 'navy';
document.getElementById('kisdoboz').innerHTML = 'onclick Kattintunk'"


onchange="
document.getElementById('kisdoboz').style.color = 'yellow';
document.getElementById('kisdoboz').style.backgroundColor = 'navy';
document.getElementById('kisdoboz').innerHTML = 'onchange A beviteli mező tartalma megváltozott'"

onfocus="
document.getElementById('kisdoboz').style.color = 'yellow';
document.getElementById('kisdoboz').style.backgroundColor = 'navy';
document.getElementById('kisdoboz').innerHTML = 'onfocus A beviteli mező megkapta fokuszt'"


>



<input type="text">

</html>

Fókuszt a "Tab" billentyűvel lehet váltani.


^ Tulajdonság ^ Az esemény bekövetkezése ^
|  onsubmit | Űrlap elküldése |


===== A DOMContentLoaded és onload esemény =====


^ Tulajdonság ^ Az esemény bekövetkezése ^
| DOMContentLoaded | Az oldal már betöltődött, de a \\ képek és más külső \\ fájlok még nem. |

<code javascript>
document.addEventListener("DOMContentLoaded", function() { })
</code>

Már minden letöltődött, a külső források is:

<code javascript>
window.addEventListener('load', function() {})
</code>

===== OnSubmit =====

Az onsubmit eseményt az űrlapon kell elkapni, a gomb helyett:

<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>doc</title>
</head>
<body>

    <div class="container">
        <h1>doc</h1>

        <form id="szamForm">
            <label for="szam">Szám</label>
            <input type="text" id="szam">
            <br>
            <button>Mehet</button>

        </form>
        
    </div>
    <script src="app.js"></script>
</body>
</html>
</code>

<code javascript app.js>
const szamInput = document.querySelector('#szam');
const szamForm = document.querySelector('#szamForm');

szamForm.addEventListener('submit', (e) => {
    if (e.preventDefault) e.preventDefault();
    alert(szamInput.value);
});
</code>


===== Oldaltöltés =====

A weboldal betöltődése az **onload** eseményt váltja ki.

==== Az oldaltöltés ====

  * window.onload()
  * onload()


<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
	<meta charset="utf-8">
	<title></title>
<script>
let bek = document.getElementById('egy');
bek.innerHTML = 'Valami';

</script>	
</head>
<body>
	<h1>Oldaltöltés</h1>
	<p id="egy"></p>

</body>
</html>
</code>

A JavaScript nem tölti be a <p> elem tartalmát, mivel a script elem
betöltésekor a <p> elem még nem töltődött be.

A megoldás, hogy csak az oldal betöltődése után írunk a <p> elembe.

<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
	<meta charset="utf-8">
	<title></title>
<script>
onload = function() {
	let bek = document.getElementById('egy');
	bek.innerHTML = 'Valami';
}
</script>	
</head>
<body>
	<h1>Oldaltöltés</h1>
	<p id="egy"></p>

</body>
</html>
</code>

==== load - addEventListener ====

<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
	<meta charset="utf-8">
	<title></title>

<script>
window.addEventListener('load', (event) => {
	let bek = document.getElementById('egy');
	bek.innerHTML = 'Valami';
});	
</script>	
	
</head>
<body>
	<h1>Oldaltöltés</h1>
	<p id="egy"></p>

</body>
</html>
</code>


==== Script a weblap végén ====

Az onload() esemény megkerülhető, ha a scriptet a lap végére tesszük.

<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<h1>Oldaltöltés</h1>
	<p id="egy"></p>

<script>
let bek = document.getElementById('egy');
bek.innerHTML = 'Valami';
</script>	


</body>
</html>
</code>

==== Oldaltöltés inline ====

<code html>
<body onload="csinald()">
</code>


===== Kattintás =====
==== addEventListener event ====

<code javascript>
const mehetGomb = document.getElementById('mehetGomb');

mehetGomb.addEventListener('click', event => {
	console.log('kattintás volt');
});
</code>

==== addEventListener ====

<code html>
<button id="mehetGomb">Mehet</button>
</code>


<code javascript>
let mehetGomb = document.getElementById('mehetGomb');

mehetGomb.addEventListener('click', function() {
	console.log('kattintás volt');
});
</code>

==== Kattintás onclick ====

<code html>
<button onclick="mehet()">Mehet</button>
</code>

<code javascript>
var mehet = function() {
    console.log('kattintás volt');
};
</code>

==== Kattintás onclick html ====

<code html>
<button onclick="
    console.log('kattintás volt');
">
Mehet
</button>
</code>


==== Kattintás onclick js ====

<code html>
<button id="mehetGomb">Menjen</button>
</code>

<code javascript>
let mehetGomb = document.getElementById('mehetGomb');

mehetGomb.onclick = function() {
	console.log('kattintás volt');
};
</code>


===== Fókuszvesztés =====

<code html>
<input id="szam1">
<input id="szam2">
</code>


<code javascript>
let szam1 = document.getElementById('szam1');

szam1.addEventListener('blur', function() {
	console.log('Fókuszvesztés');
});
</code>

===== addEventListener() =====

Adott két div, egymásba ágyazva:
<code html>
<div id="div1">
    Külső
    <div id="div2">Belső</div>
</div>
</code>

Mindkettőhöz eseményt rendelünk:

<code javascript>
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

div1.addEventListener('click', function(){
    alert('div1');
});

div2.addEventListener('click', function(){
    alert('div2');
});
</code>

Az eseményt mindkét div elfogja, de melyik 
reagál rá hamarabb? 

Alapértelmezetten, mindig a belső. 
Ez megadható az addEventListener() számára, harmadik
paraméterként, ahol egy boolean értéket kell megadni.
Alapértelmezett a false, ami belülről kifelé engedi
terjedni az eseményt. Így elsőként a div2 kapja meg.

Ha változtatni szeretnénk, csak paraméterezzük true 
értékkel:

<code javascript>
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

div1.addEventListener('click', function(){
    alert('div1');
}, true);

div2.addEventListener('click', function(){
    alert('div2');
}, true);
</code>

===== Billentyűzetfigyelés =====

<code javascript>
window.addEventListener("keydown", function(event) {
    switch(event.code) {
        case "KeyW":
        case "ArrowUp":
            //utasítások
            break;

        case "KeyS":
        case "ArrowDown":
            //utasítások
            break;

        case "KeyA":
        case "ArrowLeft":
            //utasítások
        break;

        case "KeyD":
        case "ArrowRight":
            //utasítások
        break;
    }
    //Események eldobása, hogy ne legyen kétszer kezelve
    event.preventDefault();
}, true);
</code>

==== input elemen Enter ====

<code javascript>
const input = document.querySelector('input')

input.addEventListener("keyup", event => {
  if(event.key === 'Enter'){
    console.log('Enter lenyomva')
  }
})

</code>

===== A this és lambda kifejezés =====

A lambda kifejezéssel létrehozott névtelen függvény nem adja vissza a this
objektumot, ami maga a nyomógomb function() esetén.


Nézzük meg mit ad vissza a következő kattintás:

<code javascript app.js>
const startButton = document.querySelector('#startButton');

startButton.addEventListener('click', () => {
    console.log(this);
});
</code>

Ha most megnézzük function() névtelen függvénnyel, akkor a this a kattintott
gomb lesz:

<code javascript app.js>
const startButton = document.querySelector('#startButton');

startButton.addEventListener('click', function() {
    console.log(this);
});

</code>
===== Linkek =====
  * https://www.w3schools.com/jsref/dom_obj_event.asp (2021)
  * https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event (2021)
  * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener (2021)
  * https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event (2021)
  * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code (2021)