Lekcja 6

Lekcja 6 – Delegowanie zdarzeń: Mistrzostwo w efektywności 🎯✨

Witamy na Lekcji 6! Teraz jesteś już profesjonalistą w obsłudze zdarzeń: klikanie, wpisywanie tekstu, zaznaczanie elementów – wszystko masz opanowane. Ale co, jeśli Twoja strona internetowa jest pełna dynamicznych elementów, które pojawiają się w trakcie działania? Nie martw się! Delegowanie zdarzeń to Twoja supermoc (i sposób na zachowanie spokoju).

Delegowanie zdarzeń to jak szef kuchni w restauracji – zamiast osobiście podawać każde danie, deleguje zadania kelnerom. Prosto, elegancko i wydajnie.

Czym jest delegowanie zdarzeń? 🤔

Delegowanie zdarzeń to technika, w której dodajesz nasłuch zdarzeń do elementu nadrzędnego, a on „słucha” zdarzeń swoich elementów podrzędnych. Zamiast dodawać osobny nasłuch dla każdego elementu, przypisujesz to zadanie ich wspólnemu przodkowi.

Sekret tkwi w tym, że zdarzenia w JavaScript bąbelkują w górę. Kiedy zdarzenie występuje na elemencie podrzędnym, wędruje do elementów nadrzędnych, aktywując wszystkie nasłuchy, które znajdzie po drodze. To oznacza, że możesz obsługiwać zdarzenia nawet na elementach, które zostały dodane dynamicznie.

Przygotowujemy pole do testów 🛠️

Utwórz nowy folder dla tej lekcji (lub użyj istniejącego folderu DOM_Project):
```
mkdir Lesson6
cd Lesson6
```

Utwórz plik HTML o nazwie index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Delegowanie zdarzeń</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #parent-container { border: 2px solid lightblue; padding: 10px; margin-top: 20px; }
        .child { margin: 5px 0; padding: 5px; border: 1px dashed gray; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Plac zabaw delegowania zdarzeń 🎢</h1>
    <button id="add-child-btn">Dodaj nowy element</button>
    <div id="parent-container">
        <div class="child">Element 1</div>
        <div class="child">Element 2</div>
        <div class="child">Element 3</div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Utwórz plik JavaScript o nazwie script.js:

const parentContainer = document.getElementById("parent-container");
const addChildBtn = document.getElementById("add-child-btn");

// Delegowanie zdarzeń: nasłuchujemy kliknięć na elementach podrzędnych przez element nadrzędny
parentContainer.addEventListener("click", function(event) {
    if (event.target.classList.contains("child")) {
        alert(`Kliknąłeś na ${event.target.textContent}`);
    }
});

// Dynamiczne dodawanie nowych elementów
addChildBtn.addEventListener("click", function() {
    const newChild = document.createElement("div");
    newChild.classList.add("child");
    newChild.textContent = `Element ${parentContainer.children.length + 1}`;
    parentContainer.appendChild(newChild);
});

Uruchamiamy projekt przez Caddy 🌐

Masz już zainstalowany Caddy? Świetnie! Oto jak szybko uruchomić serwer:

Przejdź do folderu swojego projektu:
```
cd Lesson6
```
Uruchom serwer Caddy:
```
caddy file-server --listen :8080
```
Otwórz przeglądarkę:
- Przejdź do http://localhost:8080, aby zobaczyć swój projekt w akcji.

I gotowe! Możesz teraz testować swój projekt w czasie rzeczywistym. Jeśli zmiany nie są widoczne od razu, użyj Ctrl + F5, aby je odświeżyć.

Jak to działa? ⚙️

Początkowe ustawienia: parentContainer zawiera trzy elementy (Element 1, Element 2, Element 3).
Dodajemy nasłuch do elementu nadrzędnego: Zamiast dodawać nasłuchy do każdego elementu podrzędnego, dodajemy jeden nasłuch do nadrzędnego. Dzięki mechanizmowi bubbling kliknięcia na elementach podrzędnych są przechwytywane przez nadrzędny.
Dynamiczne elementy: Klikając przycisk „Dodaj nowy element”, dynamicznie tworzysz nowe elementy. Nasłuch nadrzędnego działa dla nich automatycznie — bez dodatkowego kodu!

Dlaczego warto używać delegowania zdarzeń? 🚀

Efektywność: Nie trzeba dodawać nasłuchów do każdego elementu osobno.
Prostota: Jeden nasłuch na wszystko! Idealne dla dynamicznych treści.
Wydajność: Mniej nasłuchów oznacza lepszą wydajność, szczególnie w większych aplikacjach.

Mini-projekt: Lista zadań 📝

Zastosujmy delegowanie zdarzeń, aby stworzyć interaktywną listę zadań, w której można oznaczać zadania jako ukończone.

Zaktualizuj swój HTML:

<input type="text" id="task-input" placeholder="Dodaj nowe zadanie i naciśnij Enter" />
<ul id="task-list"></ul>

Zaktualizuj swój script.js:

const taskInput = document.getElementById("task-input");
const taskList = document.getElementById("task-list");

// Dynamiczne dodawanie zadań
taskInput.addEventListener("keydown", function(event) {
    if (event.key === "Enter" && taskInput.value.trim() !== "") {
        const taskItem = document.createElement("li");
        taskItem.textContent = taskInput.value;
        taskItem.classList.add("task");
        taskList.appendChild(taskItem);
        taskInput.value = ""; // Czyścimy pole
    }
});

// Używamy delegowania, aby obsługiwać kliknięcia na zadaniach
taskList.addEventListener("click", function(event) {
    if (event.target.classList.contains("task")) {
        event.target.style.textDecoration = "line-through"; // Oznacz jako ukończone
    }
});

Co dalej?

Świetna robota! Teraz znasz tajniki delegowania zdarzeń i wiesz, jak efektywnie zarządzać zdarzeniami. W następnym kroku zajmiemy się animacjami JavaScript, które sprawią, że Twoje strony będą się ruszać, skakać i znikać, jakby brały udział w konkursie talentów.

Do zobaczenia w Lekcji 7 – Animacje JavaScript: Ożywianie Twoich Stron!

Teraz idź i deleguj zdarzenia jak prawdziwy mistrz! 🎠