Úloha 4 – Seznam úkolů s delegací událostí (toggle + delete

Úvod do úlohy

Když se webová stránka stane interaktivní, obvykle za tím stojí události (events). Každé kliknutí, pohyb myši, stisk klávesy nebo odeslání formuláře spouští v prohlížeči určitou událost. JavaScript nám umožňuje na tyto události reagovat pomocí posluchačů (event listeners). Díky nim dokážeme vytvořit tlačítka, která něco vykonají, validovat formuláře nebo dynamicky měnit obsah stránky podle uživatelského chování.

Znalost práce s událostmi patří mezi základní dovednosti každého webového vývojáře. A protože se v praxi s nimi setkáte na každém kroku, je důležité naučit se je používat správně, přehledně a efektivně.

---

Teorie a principy

Přidávání posluchačů událostí

Nejčastěji se události obsluhují metodou addEventListener(), která umožňuje připojit k prvku funkci, jež se spustí při výskytu určité akce.

Základní tvar:

Příklad – kliknutí na tlačítko:

Tento způsob je výhodný, protože:

• umožňuje přidat více posluchačů na stejnou událost,

• nezasahuje do HTML kódu (na rozdíl od atributu onclick),

• odděluje logiku (JavaScript) od struktury (HTML).

---

Typy událostí

Nejběžnější události, se kterými se studenti setkají:

• click – kliknutí myší

• mouseover / mouseout – najetí a opuštění kurzoru

• keydown / keyup – stisk a uvolnění klávesy

• submit – odeslání formuláře

• change / input – změna hodnoty ve formulářovém poli

Události se mohou vztahovat na libovolné elementy: tlačítka, odkazy, formuláře, obrázky i celé sekce stránky.

---

Delegace událostí

Když se na stránce nachází větší množství podobných prvků (např. desítky tlačítek nebo položky v seznamu), není efektivní připojovat posluchač ke každému zvlášť. Místo toho použijeme tzv. delegaci událostí.

Princip je jednoduchý:

• posluchač připojíme k rodičovskému prvku,

• pomocí vlastnosti event.target zjistíme, který potomek událost vyvolal.

Tato technika zjednodušuje kód a zvyšuje výkon – zejména při dynamicky vytvářeném obsahu.

---

Praktické příklady kódu

Příklad 1: Jednoduchá reakce na kliknutí

Co se děje:
Po kliknutí na tlačítko se spustí funkce, která změní text v odstavci.

---

Příklad 2: Zachycení odeslání formuláře

Co se děje:
Událost submit zachytí pokus o odeslání formuláře. Pomocí event.preventDefault() zabráníme obnovení stránky a místo toho provedeme vlastní akci (zobrazíme zprávu).

---

Příklad 3: Delegace událostí

Co se děje:
Namísto tří samostatných posluchačů má seznam jediný addEventListener(), který zpracovává kliknutí na kterékoliv <li>. Pomocí event.target zjistíme konkrétní prvek, který byl kliknutý.

---

Typické chyby / záludnosti

1. Chybějící event.preventDefault() u formulářů
   → Bez něj se stránka po odeslání automaticky znovu načte a ztrácíme data.

2. Záměna názvu události
   → Například onclick není totéž co "click". V addEventListener() se vždy používá bez „on“.

3. Nepřístupné elementy
   → Pokud JavaScript běží dříve, než jsou prvky načteny, getElementById() vrátí null. Řešením je vložit <script> až na konec <body>.

4. Zapomenuté odstranění posluchače
   → U dynamicky vytvářených elementů je vhodné zvážit i odstranění posluchačů pomocí removeEventListener(), aby nedocházelo k únikům paměti.

5. Chybná práce s event.target
   → V delegaci vždy kontrolujte, že kliknutý prvek je opravdu ten, na který chcete reagovat.

---

Shrnutí

• addEventListener("typ", funkce) – přidává posluchač události.

• Pomocí event objektu zjistíme informace o akci (např. event.target, event.type).

• event.preventDefault() – zamezí výchozímu chování (např. odeslání formuláře).

• Delegace událostí – posluchač připojený k rodiči zpracovává události potomků, což šetří výkon i kód.

• Události umožňují webovým stránkám reagovat na uživatele v reálném čase – to je základ interaktivního webu.

Úloha

Zadání (kontext úlohy):

Na stránce je seznam úkolů. Každý úkol lze označit jako splněný kliknutím na jeho text – položka se pak zobrazí přeškrtnutě a zešedne. U každé položky je také malé tlačítko „Smazat“, které úkol odstraní ze seznamu.

---

Cíl úlohy:

Procvičit si práci s událostmi, jejich delegací a manipulací s DOM. Studenti si vyzkouší reagovat na různé akce (kliknutí na text vs. kliknutí na tlačítko), používat event.target a měnit třídy i obsah prvků.

---

Vstupní podmínky:

Student pracuje pouze s jedním HTML souborem.
JavaScript je vložen na konci dokumentu v elementu <script>.
Každá položka má v sobě text úkolu a malé tlačítko „Smazat“.

---

Požadovaný výstup:

• Na stránce bude:

  • nadpis „Seznam úkolů“,

  • seznam <ul> s několika položkami (např. „Nakoupit“, „Uklidit“, „Napsat úkol“).

• Kliknutím na text úkolu se položka označí jako splněná (přeškrtnutý text, šedá barva).

• Opětovným kliknutím se označení odstraní (úkol se „odškrtne“).

• Kliknutím na tlačítko „Smazat“ se daný úkol odstraní ze seznamu.

• Kliknutí mimo text nebo tlačítko nemá žádný efekt.

---

Doplňující pokyny:

• Použij delegaci událostí – jeden addEventListener() na <ul>.

• Rozliš, na co bylo kliknuto:

  • pokud event.target.tagName == "SPAN" → přepínej třídu .hotovo,

  • pokud event.target.tagName == "BUTTON" → smaž rodičovský <li>.

• Použij classList.toggle() pro přepínání třídy.

• Pro smazání prvku využij element.remove().

Řešení úlohy

Co je zde splněno

• Jeden addEventListener() na <ul> (delegace událostí).

• Rozlišení cíle přes event.target a tagName ("SPAN" vs. "BUTTON").

• Přepínání stavu úkolu pomocí classList.toggle("hotovo").

• Odstranění konkrétní položky přes element.remove().

• Kliknutí mimo text nebo tlačítko nic nedělá.

Vylepšení oproti začátečnické verzi

• .matches() a .closest() pro robustnější a čitelnější práci s cílem události.

• Šipková funkce a destrukturalizace z e pro stručnost.

• button[type="button"] – prevence nežádoucího odesílání formuláře, pokud by se kód někdy vložil do <form>.

• Jemné CSS úpravy (user-select, systémové písmo).