Įvykiai, burbuliavimas, delegavimas

2 pamokos kortelė graži, bet negyva — spustelėjus nieko nevyksta. DOM veikia įvykiais (events): naršyklė praneša apie paspaudimus, klavišus, formų pateikimą, o mes į juos reaguojam.

Pagrindas — addEventListener:

button.addEventListener('click', (e) => { /* e — įvykio objektas */ });

Bet svarbiausia — suprasti, kaip įvykiai keliauja. Kai spustelini mygtuką, esantį kortelės viduje, įvykis burbuliuoja (bubbling): pirma suveikia ant mygtuko, tada ant kortelės, tada ant body, tada ant document. Vienas paspaudimas — kelios pakopos aukštyn.

Iš to seka dvi galingos technikos ir du spąstai:

• Delegavimas (delegation). Užuot kabinę klausytoją ant kiekvieno mygtuko, kabinam vieną ant bendro tėvo. Kadangi įvykiai burbuliuoja, tas vienas klausytojas mato juos visus. Būtent taip veikia klaviatūros klavišai (vienas klausytojas ant document).
• e.stopPropagation() — sustabdo burbuliavimą. Reikalingas, kai mygtukas yra kito, spustelimo elemento viduje (mūsų ♡ kortelėje).
• e.preventDefault() — sustabdo naršyklės numatytąjį veiksmą (formos submit → puslapio perkrovimas; nuorodos paspaudimas → navigacija).

stopPropagation ir preventDefault dažnai painiojami, bet jie skirtingi: pirmas stabdo įvykio kelionę per DOM, antras — naršyklės įprastą reakciją. Šioje pamokoje pamatysim abu — ir abu kaip tikras klaidas, kurias sukėlus programa elgiasi keistai.