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:


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)