3. előadás - Események

Központban az esemény kezelő, handler

addEventListener() removeEvenetListener()

Esemény típusok

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

Opciók

once: csak egyszer fusson le
capture:
passive: nincs preventDefault()

Esemény buborékozás

Az esemény felbuborékozódik. Ha egy leszármazottal történik valami akkor a szülő is megkapja az eseményt.

Az eseményt kiváltó objektum: e.target

"A nagypapa pontosan tuni fogja hogy kit ütöttek meg"

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

Az eseményt elég a "nagypapára" feliratkoztatni.

"A nagypapa üvölteni fog, nem csak ha az unokáit ütik meg, hanem ha a gyerekeit ütik meg. Azt is ha őt ütik meg.'

Minket csak az érdekel, ha az unokával történik valami, az nem ha a szülövel. target.matches("li a")

Mi van ha az \(\red{\text{elem}}\) amivel dolgozni szeretnénk, nem a \(\green{\text{forrás}}\) és nem is az event \(\blue{\text{kezelője}}\) hanem a kettő között van?

\[ \begin{CD} \boxed{\blue{ul}} \\ @VVV \\ \boxed{li} \\ @VVV \\ \boxed{\red{a}} \\ @VVV \\ \boxed{\green{span}} \\ \end{CD} \]

Meg kell keresni a forráshoz legközelebbi megfelelő őst:
sourceElement.closest("a");