🎯 Lezione 10: Gestione Eventi JavaScript

const bottone = document.querySelector('button');

// Sintassi: elemento.addEventListener(evento, funzione)
bottone.addEventListener('click', function(evento) {
    console.log('Bottone è stato cliccato!');
    console.log('Elemento cliccato:', evento.target);
    console.log('Coordinata X del click:', evento.clientX);
    console.log('Coordinata Y del click:', evento.clientY);
});

// Con arrow function
bottone.addEventListener('click', (evento) => {
    console.log('Click con arrow function');
});

// Con funzione predefinita
function gestisciClick(evento) {
    console.log('Click gestito da funzione separata');
}
bottone.addEventListener('click', gestisciClick);

// Eventi del mouse
bottone.addEventListener('click', () => console.log('Click'));
bottone.addEventListener('dblclick', () => console.log('Doppio click'));
bottone.addEventListener('mouseenter', () => console.log('Mouse entrato'));
bottone.addEventListener('mouseleave', () => console.log('Mouse uscito'));
bottone.addEventListener('mousemove', (e) => console.log(`Mouse: ${e.clientX}, ${e.clientY}`));

// Eventi della tastiera
document.addEventListener('keydown', (e) => {
    console.log('Tasto premuto:', e.key);
    console.log('Codice tasto:', e.code);
});

document.addEventListener('keyup', (e) => {
    console.log('Tasto rilasciato:', e.key);
});

// Eventi del form
const input = document.querySelector('input');
input.addEventListener('focus', () => console.log('Input in focus'));
input.addEventListener('blur', () => console.log('Input perso focus'));
input.addEventListener('input', (e) => console.log('Testo cambiato:', e.target.value));
input.addEventListener('change', (e) => console.log('Valore cambiato:', e.target.value));

// Eventi di caricamento
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM completamente caricato e pronto');
});

window.addEventListener('load', () => {
    console.log('Pagina completamente caricata (include immagini)');
});

window.addEventListener('beforeunload', (e) => {
    e.preventDefault();
    e.returnValue = ''; // Mostra avviso di conferma
});

// Prevenire l'invio di un form
const form = document.querySelector('form');
form.addEventListener('submit', function(evento) {
    evento.preventDefault(); // Impedisce il ricaricamento della pagina
    console.log('Form inviato ma pagina non ricaricata!');
    
    // Qui puoi gestire i dati del form
    const dati = new FormData(this);
    console.log('Dati form:', Object.fromEntries(dati));
});

// Prevenire il comportamento di un link
const link = document.querySelector('a');
link.addEventListener('click', function(evento) {
    evento.preventDefault(); // Impedisce la navigazione
    console.log('Link cliccato ma navigazione bloccata');
    
    // Qui puoi fare qualcos'altro invece di navigare
    alert('Navigazione bloccata!');
});

// Prevenire il menu contestuale (tasto destro)
document.addEventListener('contextmenu', function(evento) {
    evento.preventDefault();
    console.log('Menu contestuale disabilitato');
});

// HTML: <div id="genitore"><button id="figlio">Cliccami</button></div>

const genitore = document.getElementById('genitore');
const figlio = document.getElementById('figlio');

// BUBBLING (default) - dall'interno verso l'esterno
figlio.addEventListener('click', () => console.log('Figlio cliccato'));
genitore.addEventListener('click', () => console.log('Genitore cliccato'));
// Output quando clicchi il figlio: "Figlio cliccato" → "Genitore cliccato"

// CAPTURING - dall'esterno verso l'interno
genitore.addEventListener('click', () => console.log('Genitore (capturing)'), true);
figlio.addEventListener('click', () => console.log('Figlio (capturing)'), true);
// Output: "Genitore (capturing)" → "Figlio (capturing)"

// Fermare la propagazione
figlio.addEventListener('click', function(evento) {
    evento.stopPropagation(); // Ferma la propagazione
    console.log('Click sul figlio - propagazione fermata');
});

// Invece di aggiungere event listener a ogni elemento,
// aggiungine uno al genitore e usa event.target

const lista = document.getElementById('lista');

// DELEGAZIONE CORRETTA
lista.addEventListener('click', function(evento) {
    // Controlla se il click è su un elemento LI
    if (evento.target.tagName === 'LI') {
        evento.target.classList.toggle('selezionato');
        console.log('Elemento selezionato:', evento.target.textContent);
    }
    
    // Controlla se il click è su un bottone dentro LI
    if (evento.target.tagName === 'BUTTON') {
        const item = evento.target.parentElement;
        item.remove();
        console.log('Elemento rimosso');
    }
});

// Questo funziona anche per elementi aggiunti dinamicamente!
function aggiungiElemento() {
    const nuovoLi = document.createElement('li');
    nuovoLi.innerHTML = `Nuovo elemento <button>Rimuovi</button>`;
    lista.appendChild(nuovoLi);
    // Non serve aggiungere event listener - la delegazione funziona già!
}