Tartalomjegyzék
A JavaScript eseménykezelés
- Szerző: Sallai András
- Copyright © 2021, Sallai András
- Szerkesztve: 2021, 2023
- 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:
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
- window.onload()
- onload()
- 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.
load - addEventListener
Script a weblap végén
Az onload() esemény megkerülhető, ha a scriptet a lap végére tesszük.
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
Kattintás onclick html
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); });