Tartalomjegyzék

< JavaScript

A JavaScript eseménykezelés

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:

doboz

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. 
document.addEventListener("DOMContentLoaded", function() { })

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

window.addEventListener('load', function() {})

OnSubmit

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

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>
app.js
const szamInput = document.querySelector('#szam');
const szamForm = document.querySelector('#szamForm');
 
szamForm.addEventListener('submit', (e) => {
    if (e.preventDefault) e.preventDefault();
    alert(szamInput.value);
});

Oldaltöltés

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

Az oldaltöltés

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>

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.

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>

load - addEventListener

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>

Script a weblap végén

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

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>

Oldaltöltés inline

<body onload="csinald()">

Kattintás

addEventListener event

const mehetGomb = document.getElementById('mehetGomb');
 
mehetGomb.addEventListener('click', event => {
	console.log('kattintás volt');
});

addEventListener

<button id="mehetGomb">Mehet</button>
let mehetGomb = document.getElementById('mehetGomb');
 
mehetGomb.addEventListener('click', function() {
	console.log('kattintás volt');
});

Kattintás onclick

<button onclick="mehet()">Mehet</button>
var mehet = function() {
    console.log('kattintás volt');
};

Kattintás onclick html

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

Kattintás onclick js

<button id="mehetGomb">Menjen</button>
let mehetGomb = document.getElementById('mehetGomb');
 
mehetGomb.onclick = function() {
	console.log('kattintás volt');
};

Fókuszvesztés

<input id="szam1">
<input id="szam2">
let szam1 = document.getElementById('szam1');
 
szam1.addEventListener('blur', function() {
	console.log('Fókuszvesztés');
});

addEventListener()

Adott két div, egymásba ágyazva: 

<div id="div1">
    Külső
    <div id="div2">Belső</div>
</div>

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

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
 
div1.addEventListener('click', function(){
    alert('div1');
});
 
div2.addEventListener('click', function(){
    alert('div2');
});

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: 

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
 
div1.addEventListener('click', function(){
    alert('div1');
}, true);
 
div2.addEventListener('click', function(){
    alert('div2');
}, true);

Billentyűzetfigyelés

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

input elemen Enter

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

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:

app.js
const startButton = document.querySelector('#startButton');
 
startButton.addEventListener('click', () => {
    console.log(this);
});

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

app.js
const startButton = document.querySelector('#startButton');
 
startButton.addEventListener('click', function() {
    console.log(this);
});

Linkek