const bouton = document.querySelector("#mon-bouton");

// addEventListener : methode moderne et recommandee (multiple listeners possibles)
bouton.addEventListener("click", (event) => {
    console.log("Bouton clique", event.target);
});

// Fonction nommee pour pouvoir retirer le listener plus tard
function gererClic(event) {
    console.log("Clic gere");
}
bouton.addEventListener("click", gererClic);
bouton.removeEventListener("click", gererClic);        // necessite la MEME reference de fonction

// L'objet Event : proprietes utiles
bouton.addEventListener("click", (event) => {
    console.log(event.type);          // "click"
    console.log(event.target);          // element qui a declenche l'evenement
    console.log(event.currentTarget);     // element sur lequel le listener est attache
    console.log(event.timeStamp);
});

// preventDefault : empecher le comportement natif du navigateur
const lien = document.querySelector("a");
lien.addEventListener("click", (event) => {
    event.preventDefault();          // empeche la navigation
    console.log("Navigation bloquee");
});

const formulaire = document.querySelector("form");
formulaire.addEventListener("submit", (event) => {
    event.preventDefault();          // empeche le rechargement de page
    // validation + envoi via fetch a la place
});

// --- Propagation : capture, target, bubbling ---
// capture (descend) -> target -> bubbling (remonte) : 3 phases
document.querySelector("#parent").addEventListener(
    "click",
    () => console.log("Phase de capture (parent)"),
    { capture: true }                 // s'execute EN DESCENDANT, avant l'enfant
);
document.querySelector("#enfant").addEventListener("click", () => {
    console.log("Cible atteinte (enfant)");
});
document.querySelector("#parent").addEventListener("click", () => {
    console.log("Phase de bubbling (parent)");     // s'execute APRES l'enfant, en remontant
});

// stopPropagation : empeche la remontee (bubbling) vers les ancetres
document.querySelector("#enfant").addEventListener("click", (event) => {
    event.stopPropagation();
});

// --- Delegation d'evenements : un seul listener pour de nombreux enfants (performant) ---
document.querySelector("#liste").addEventListener("click", (event) => {
    if (event.target.matches("li.item")) {
        console.log("Item clique :", event.target.textContent);
    }
    // fonctionne meme pour des <li> ajoutes DYNAMIQUEMENT apres coup -- pas de re-binding necessaire
});

// --- Options du listener ---
bouton.addEventListener(
    "click",
    () => console.log("Une seule fois"),
    { once: true }                       // se retire automatiquement apres le premier appel
);

window.addEventListener(
    "scroll",
    () => console.log("scroll"),
    { passive: true }                     // indique qu'on n'appellera JAMAIS preventDefault : optimise le scroll
);

// --- Debounce/throttle appliques aux evenements haute frequence (voir lecon dediee) ---
let timeoutId;
window.addEventListener("resize", () => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => console.log("Resize termine"), 200);
});

// --- CustomEvent : creer et dispatcher ses propres evenements ---
const evenementPerso = new CustomEvent("produit-ajoute", {
    detail: { id: 42, nom: "Clavier" },
    bubbles: true,
});
document.querySelector("#panier").addEventListener("produit-ajoute", (event) => {
    console.log("Produit recu :", event.detail);
});
document.querySelector("#panier").dispatchEvent(evenementPerso);

// --- AbortController : nettoyer plusieurs listeners d'un coup ---
const controller = new AbortController();
document.addEventListener("click", () => console.log("clic"), { signal: controller.signal });
document.addEventListener("keydown", () => console.log("touche"), { signal: controller.signal });
controller.abort();     // retire TOUS les listeners lies a ce signal en une fois