[[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:
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: doc

doc


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

Oldaltöltés

A JavaScript nem tölti be a

elem tartalmát, mivel a script elem betöltésekor a

elem még nem töltődött be. A megoldás, hogy csak az oldal betöltődése után írunk a

elembe.

Oldaltöltés

==== load - addEventListener ====

Oldaltöltés

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

==== Oldaltöltés inline ==== ===== Kattintás ===== ==== addEventListener event ==== const mehetGomb = document.getElementById('mehetGomb'); mehetGomb.addEventListener('click', event => { console.log('kattintás volt'); }); ==== addEventListener ==== let mehetGomb = document.getElementById('mehetGomb'); mehetGomb.addEventListener('click', function() { console.log('kattintás volt'); }); ==== Kattintás onclick ==== var mehet = function() { console.log('kattintás volt'); }; ==== Kattintás onclick html ==== ==== Kattintás onclick js ==== let mehetGomb = document.getElementById('mehetGomb'); mehetGomb.onclick = function() { console.log('kattintás volt'); }; ===== Fókuszvesztés ===== let szam1 = document.getElementById('szam1'); szam1.addEventListener('blur', function() { console.log('Fókuszvesztés'); }); ===== addEventListener() ===== Adott két div, egymásba ágyazva:
Külső
Belső
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: 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: const startButton = document.querySelector('#startButton'); startButton.addEventListener('click', function() { console.log(this); }); ===== 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)