3. előadás

Események

"Hogy mennyi van? Egy rahedli!" ~ Győzke

Események listája

• click: egérkattintás
• mousemove: egérmozgatás
• mousedown: egér gombjának lenyomása
• mouseup: egér gombjának felenegedése
• input: input mező értékének megváltozása
• keydown: billentyűzet gombjának lenyomása
• keyup: billentyűzet gombjának felengedése
• keypress: billentyűzet gombjának megnyomása
• submit: űrlap elküldése
• scroll: görgetés az oldalon

Eseménykezelő függvények regisztrálása

• addEventListener -- feliratkozás
• removeEventListener -- leiratkozás

Példa feladat

Adott egy hivatkozásokból álló lista. Ha a SHIFT le van nyomva és úgy kattintunk, akkor ne kövesse a linket, hanem írja ki a konzolra!

Honnan tudjuk, hogy a SHIFT billentyű le van-e nyomva?

shiftKey

function handleLinkClick(event) {
    if (!event.shiftKey) {
        return;
    }

    const href = link.href;
    console.log(href);
    alert('stop');
}

Hogyan tiltom le a hivatkozás követését?

preventDefault()

const link = document.querySelector('#link1');

function handleLinkClick(event) {
    if (!event.shiftKey) {
        return;
    }

    event.preventDefault();
    const href = link.href;
    console.log(href);
}

link.addEventListener('click', handleLinkClick);

Hogyan skálázható a megoldás a hivatkozások számával?

this: ami az eseményt kiváltotta

const linkList = document.querySelector('#linkList');

function handleListClick(event) {
    if (!event.shiftKey) {
        return;
    }

    const target = event.target;

    if (!target.matches('li a')) {
        return;
    }

    event.preventDefault();
    const href = target.href;
    console.log(href);
}

linkList.addEventListener('click', handleListClick);

Eseményobjektum

• referencia
• Tartalma az eseménytő függ
• Rengeteg információt tárol
• Billentyű: key, code
• Egér: screen

Alapértelmezett műveletek

• Linkre kattintás: oldal betölt
• Beviteli mezőbe gépelés: megjelennek a karakterek
• stb.

Alapértelmezett letiltása: preventDefault()

Események buborékolása és delegálása

Buborékolás megakadályozása: e.stopPropagation()

• Föntről lefele (event capture)
• Lentről felfele (event bubbling)

forrás \(\to\) szülő \(\to\) szülő \(\to \; \dots \to\) body \(\to\) html \(\to\) document \(\to\) window