DOM és eseménykezelés
DOM, event target, bubbling és capturing: hogyan jut el egy click a fában, mi az event delegation, és mikor veszélyes fölöslegesen stopPropagationt használni?
Röviden
A DOM a dokumentum programozható fa reprezentációja. Eseménynél a böngésző meghatározza a targetet, majd az esemény útvonalán capture és bubble fázisokban hallgatók futhatnak a konkrét eseménytípustól függően.
Mit jelent a dom és eseménykezelés?
A DOM a dokumentum programozható fa reprezentációja. Eseménynél a böngésző meghatározza a targetet, majd az esemény útvonalán capture és bubble fázisokban hallgatók futhatnak a konkrét eseménytípustól függően.
Esemény útja
01
window
02
ancestor capture
03
target
04
ancestor bubble
05
window
Hogyan működik a gyakorlatban?
Event delegationnél egy közös őselem figyeli a felbuborékoló eseményt, majd `event.target`/`closest` alapján dönti el, mely gyermek váltotta ki. Dinamikus listáknál ez kevesebb listenerrel és egyszerűbb lifecycle-lal járhat.
- `target` a kiváltó elem, `currentTarget` az aktuális listener eleme.
- Nem minden esemény buborékol ugyanúgy.
- `preventDefault` alapértelmezett böngészőműveletet akadályoz, nem propagationt.
- `stopPropagation` csak indokolt komponenshatárnál használható tudatosan.
Gyakorlati fejlesztői szemlélet
A platform natív vezérlőelemei rengeteg esemény- és accessibility viselkedést eleve jól kezelnek. Egy kattintható div helyett a button nem csak szemantika: billentyűzet és fókusz szempontból is jobb alap.
Gyakori hibák és félreértések
- `preventDefault` és `stopPropagation` összekeverése.
- Globális document listener cleanup nélkül.
- Minden listaitemhez külön handler, amikor delegation egyszerűbb lenne.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy