4.2 Notikumu klausītāji (Event Listeners) un interakcija

Lai pārlūkprogramma zinātu, kad izsaukt tavu funkciju, mēs izmantojam notikumu klausītājus (Event Listeners). Tas ir kā neredzams sargs, kas stāv pie HTML elementa un gaida, kad notiks konkrēta darbība (notikums).

• Notikumu veidi: click (peles klikšķis), keydown (taustiņa nospiešana), mouseenter (peles novietošana virs elementa).
• Sintakse: elements.addEventListener('notikums', funkcijasNosaukums);
• Notikuma objekts (Event Object): Kad notiek darbība, pārlūks bieži nodod papildu informāciju (piemēram, KURU tieši taustiņu tu nospiedi). Mēs to varam "noķert" funkcijas parametros, visbiežāk apzīmējot ar burtu e vai event.

Piezīme: Projektos parasti izvairāmies no onclick="" rakstīšanas tieši HTML failā. HTML ir struktūrai, JS ir uzvedībai!

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 4.2 Notikumu klausītāji (Event Listeners) un interakcija; detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

<section class="iesildisanas-demo">
  <h2>4.2 Notikumu klausītāji (Event Listeners) un interakcija</h2>
  <p id="rezultats">Sākuma teksts</p>
  <button id="poga">Pārbaudīt</button>
</section>

.iesildisanas-demo {
  padding: 16px;
  border: 2px solid #FFB142;
  border-radius: 6px;
}

.iesildisanas-demo button {
  cursor: pointer;
}

const rezultats = document.querySelector("#rezultats");
const poga = document.querySelector("#poga");

poga.addEventListener("click", () => {
  rezultats.textContent = "Kods darbojas: 4.2 Notikumu klausītāji (Event Listeners) un interakcija";
});

1. Atver darba failu vai rīku. Sagataves ievieto atbilstošajos projekta failos: index.html, style.css un script.js.
2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu projektā

Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.

1. Atver index.html un pievieno spēles laukumu: <div id="laukums" style="position:relative;width:400px;height:300px;border:2px solid white;overflow:hidden;"></div>.
2. Iekšā laukumā pievieno spēlētāju: <div id="speletajs" style="position:absolute;left:180px;top:250px;width:40px;height:40px;background:blue;"></div>.
3. Atver script.js un pievieno: let spX = 180; un funkciju atjaunotSpeletaju(), kas piešķir style.left = spX + "px".
4. Pievieno klausītāju: document.addEventListener("keydown", function(e) { if (e.key==="ArrowLeft") spX -= 10; if (e.key==="ArrowRight") spX += 10; atjaunotSpeletaju(); });
5. Saglabā un atver pārlūkā - nospied ← → taustiņus un pārbaudi, ka spēlētājs kustas.
6. Pievieno robežas: ja spX < 0, piestādi pie 0; ja spX > 360, piestādi pie 360.
7. Salabo, ja spēlētājs nepārvietojas - pārbaudi, vai id="speletajs" sakrīt ar getElementById.
8. Veic git commit -m "Add keyboard movement with event listener".

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.

1. Atver pārlūkā un nospied ← → taustiņus - pārbaudi, ka spēlētājs pārvietojas.
2. Pārbaudi, ka spēlētājs apstājas pie laukuma kreisās un labās malas.
3. Atver Console un pārbaudi, ka keydown eventos e.key vērtība ir "ArrowLeft" vai "ArrowRight".
4. Pievieno klausītāju arī ↑ un ↓ taustiņiem un let spY = 250; mainīgo.
5. Pārbaudi, ka spēlētājs pārvietojas augšup un lejup, neizejot ārpus laukuma.
6. Salabo jebkuru robežas kļūdu - piemēram, ja spēlētājs iet ārā vertikāli.
7. Pieraksti vienu secinājumu: kāpēc addEventListener ir labāks par onclick="" tieši HTML failā.

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

1. Pievieno peles klikšķu klausītāju uz spēles laukuma: document.getElementById("laukums").addEventListener("click", saut);
2. Pievieno funkciju saut(), kas rāda "Šāvis!" elementā <p id="statuss">.
3. Paplašini saut() tā, lai tā pievieno 5 punktus un atjauno punktu rādīšanu.
4. Atver pārlūkā - nospied taustiņus un noklikšķini - pārbaudi, ka abi darbojas vienlaikus.
5. Salabo, ja peles klikšķis ritina lapu - pievieno e.preventDefault() funkcijā.
6. Veic git commit -m "Add mouse click shoot event".
7. Demonstrē klasesbiedram - vai viņš var vadīt ar taustiņiem un šaut ar peli vienlaikus?

• Funkcijas tūlītēja izsaukšana: Rakstot poga.addEventListener("click", savakt()); (ar iekavām beigās), funkcija izpildīsies UZREIZ lapas ielādes brīdī, nevis gaidīs klikšķi. Pareizi ir savakt (bez iekavām).
• Nepareizs notikuma nosaukums: Rakstīt "onClick" JS failā ir kļūda. HTML vidē tas bija "onclick", bet addEventListener prasa tikai "click".
• Elementa neatrašana (null): Ja mēģini pievienot klausītāju pogai, pirms HTML fails to ir uzzīmējis (piem., `script` tags ir lapas sākumā), radīsies kļūda.