Eventi JavaScript

<button id="btn">Cliccami!</button>
<p id="output"></p>

// Sintassi: elemento.addEventListener('evento', funzione)

const btn = document.querySelector('#btn');
const output = document.querySelector('#output');

// Metodo 1: Funzione normale
btn.addEventListener('click', function() {
    output.textContent = "Bottone cliccato!";
});

// Metodo 2: Arrow function (CONSIGLIATO 🌟)
btn.addEventListener('click', () => {
    output.textContent = "Bottone cliccato!";
});

// Metodo 3: Funzione esterna (riutilizzabile)
function gestisciClick() {
    output.textContent = "Bottone cliccato!";
}

btn.addEventListener('click', gestisciClick);

// ✅ Puoi aggiungere più listener allo stesso evento!
btn.addEventListener('click', () => {
    console.log("Primo listener");
});

btn.addEventListener('click', () => {
    console.log("Secondo listener");
});
// Entrambi vengono eseguiti!

const btn = document.querySelector('#btn');

// Definisci funzione PRIMA (serve riferimento!)
function gestisciClick() {
    console.log("Cliccato!");
}

// Aggiungi listener
btn.addEventListener('click', gestisciClick);

// Rimuovi listener
btn.removeEventListener('click', gestisciClick);

// ⚠️ Questo NON funziona (funzioni anonime diverse)
btn.addEventListener('click', () => console.log("A"));
btn.removeEventListener('click', () => console.log("A"));
// Non rimuove nulla! Sono due funzioni diverse

// ✅ Usa riferimento alla funzione
const handler = () => console.log("A");
btn.addEventListener('click', handler);
btn.removeEventListener('click', handler);  // Funziona!

// Esempio: esegui una sola volta
function eseguiUnaVolta() {
    console.log("Eseguito una volta!");
    btn.removeEventListener('click', eseguiUnaVolta);
}

btn.addEventListener('click', eseguiUnaVolta);

// Oppure usa opzione 'once' (moderno)
btn.addEventListener('click', () => {
    console.log("Una volta!");
}, { once: true });

const btn = document.querySelector('#btn');

// Parametro 'event' (o 'e', 'evt')
btn.addEventListener('click', function(event) {
    console.log(event);  // Oggetto MouseEvent
});

// Arrow function
btn.addEventListener('click', (e) => {
    console.log(e);
});

// Proprietà comuni dell'event object
btn.addEventListener('click', (e) => {
    console.log(e.type);        // "click"
    console.log(e.target);      // Elemento cliccato
    console.log(e.currentTarget); // Elemento con listener (btn)
    console.log(e.timeStamp);   // Timestamp evento
    console.log(e.isTrusted);   // true se evento utente
});

<div id="container">
    <button id="btn">
        <span>Clicca</span>
    </button>
</div>

const container = document.querySelector('#container');

container.addEventListener('click', (e) => {
    console.log('target:', e.target);
    // Elemento EFFETTIVAMENTE cliccato (span, button, o div)
    
    console.log('currentTarget:', e.currentTarget);
    // Elemento con addEventListener (sempre div#container)
});

// Esempio pratico: sempre usa currentTarget per elemento con listener
const btn = document.querySelector('#btn');

btn.addEventListener('click', (e) => {
    // ❌ Può essere button o span (dipende dove clicchi)
    e.target.classList.add('active');
    
    // ✅ Sempre il button
    e.currentTarget.classList.add('active');
    
    // Oppure usa 'this' (non con arrow function!)
    // this.classList.add('active');
});

elemento.addEventListener('click', (e) => {
    // Posizione mouse
    console.log(e.clientX, e.clientY);  // Coordinate viewport
    console.log(e.pageX, e.pageY);      // Coordinate pagina
    console.log(e.screenX, e.screenY);  // Coordinate schermo
    
    // Bottoni mouse
    console.log(e.button);  // 0=sinistro, 1=centrale, 2=destro
    
    // Tasti modificatori
    console.log(e.ctrlKey);   // Ctrl premuto?
    console.log(e.shiftKey);  // Shift premuto?
    console.log(e.altKey);    // Alt premuto?
    console.log(e.metaKey);   // Cmd/Win premuto?
});

input.addEventListener('keydown', (e) => {
    console.log(e.key);       // Tasto premuto ("a", "Enter", "Escape")
    console.log(e.code);      // Codice fisico ("KeyA", "Enter")
    console.log(e.keyCode);   // Codice numerico (deprecato)
    
    // Tasti modificatori
    console.log(e.ctrlKey, e.shiftKey, e.altKey);
    
    // Esempio: Enter per submit
    if (e.key === 'Enter') {
        console.log("Enter premuto!");
    }
    
    // Esempio: Ctrl+S per salvare
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault();  // Blocca salvataggio browser
        console.log("Salvataggio personalizzato!");
    }
});

const elemento = document.querySelector('#elemento');

// click - Click completo (mousedown + mouseup)
elemento.addEventListener('click', (e) => {
    console.log("Cliccato!");
});

// dblclick - Doppio click
elemento.addEventListener('dblclick', (e) => {
    console.log("Doppio click!");
});

// contextmenu - Click destro
elemento.addEventListener('contextmenu', (e) => {
    e.preventDefault();  // Blocca menu contestuale
    console.log("Click destro!");
});

// mousedown - Bottone premuto
// mouseup - Bottone rilasciato
elemento.addEventListener('mousedown', (e) => {
    console.log("Mouse premuto");
});

// mouseenter - Mouse entra (non bubbling)
// mouseleave - Mouse esce (non bubbling)
elemento.addEventListener('mouseenter', (e) => {
    elemento.style.background = 'lightblue';
});

elemento.addEventListener('mouseleave', (e) => {
    elemento.style.background = '';
});

// mouseover - Mouse entra (con bubbling)
// mouseout - Mouse esce (con bubbling)

// mousemove - Mouse si muove
elemento.addEventListener('mousemove', (e) => {
    console.log(`X: ${e.clientX}, Y: ${e.clientY}`);
});

const input = document.querySelector('#input');

// keydown - Tasto premuto (ripete se tenuto)
input.addEventListener('keydown', (e) => {
    console.log(`Premuto: ${e.key}`);
});

// keyup - Tasto rilasciato
input.addEventListener('keyup', (e) => {
    console.log(`Rilasciato: ${e.key}`);
});

// keypress - Tasto carattere (DEPRECATO, usa keydown)

// Esempi pratici
input.addEventListener('keydown', (e) => {
    // Escape per cancellare
    if (e.key === 'Escape') {
        input.value = '';
    }
    
    // Enter per submit
    if (e.key === 'Enter') {
        console.log("Submit:", input.value);
    }
    
    // Blocca numeri
    if (e.key >= '0' && e.key <= '9') {
        e.preventDefault();
        console.log("Numeri non ammessi!");
    }
    
    // Shortcuts
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault();
        console.log("Salva");
    }
});

const form = document.querySelector('#form');
const input = document.querySelector('#input');
const select = document.querySelector('#select');

// submit - Form inviato
form.addEventListener('submit', (e) => {
    e.preventDefault();  // IMPORTANTE: blocca invio default!
    
    const formData = new FormData(form);
    console.log("Form inviato:", Object.fromEntries(formData));
});

// input - Valore cambia (ogni carattere)
input.addEventListener('input', (e) => {
    console.log("Valore corrente:", e.target.value);
});

// change - Valore cambia e perde focus
input.addEventListener('change', (e) => {
    console.log("Valore finale:", e.target.value);
});

// focus - Elemento riceve focus
input.addEventListener('focus', (e) => {
    console.log("Input in focus");
    input.style.borderColor = 'blue';
});

// blur - Elemento perde focus
input.addEventListener('blur', (e) => {
    console.log("Input perde focus");
    input.style.borderColor = '';
});

// select - Testo selezionato
input.addEventListener('select', (e) => {
    console.log("Testo selezionato");
});

// Esempio validazione real-time
input.addEventListener('input', (e) => {
    const value = e.target.value;
    
    if (value.length < 3) {
        input.style.borderColor = 'red';
    } else {
        input.style.borderColor = 'green';
    }
});

// load - Pagina caricata (immagini, CSS, tutto)
window.addEventListener('load', () => {
    console.log("Pagina completamente caricata!");
});

// DOMContentLoaded - DOM caricato (senza aspettare immagini)
document.addEventListener('DOMContentLoaded', () => {
    console.log("DOM pronto!");
    // ✅ Momento migliore per inizializzare JS
});

// resize - Finestra ridimensionata
window.addEventListener('resize', () => {
    console.log(`Dimensioni: ${window.innerWidth}x${window.innerHeight}`);
});

// scroll - Pagina scrollata
window.addEventListener('scroll', () => {
    console.log(`Scroll: ${window.scrollY}px`);
});

// beforeunload - Prima di lasciare pagina
window.addEventListener('beforeunload', (e) => {
    e.preventDefault();
    e.returnValue = '';  // Mostra conferma
    return '';
});

// Esempio: Sticky header on scroll
const header = document.querySelector('header');

window.addEventListener('scroll', () => {
    if (window.scrollY > 100) {
        header.classList.add('sticky');
    } else {
        header.classList.remove('sticky');
    }
});

// Esempio: Responsive behavior
window.addEventListener('resize', () => {
    if (window.innerWidth < 768) {
        console.log("Mobile");
    } else {
        console.log("Desktop");
    }
});

<ul id="lista">
    <li>Item 1 <button class="delete">X</button></li>
    <li>Item 2 <button class="delete">X</button></li>
    <li>Item 3 <button class="delete">X</button></li>
</ul>
<button id="add">Aggiungi Item</button>

// ❌ PROBLEMA: Listener su ogni bottone
const deleteButtons = document.querySelectorAll('.delete');

deleteButtons.forEach(btn => {
    btn.addEventListener('click', (e) => {
        e.target.closest('li').remove();
    });
});

// Problemi:
// 1. Performance: molti listener
// 2. Nuovi elementi NON hanno listener
document.querySelector('#add').addEventListener('click', () => {
    const li = document.createElement('li');
    li.innerHTML = 'Nuovo <button class="delete">X</button>';
    document.querySelector('#lista').append(li);
    // Questo bottone NON funziona! 😱
});

// ✅ SOLUZIONE: Un listener sul parent
const lista = document.querySelector('#lista');

lista.addEventListener('click', (e) => {
    // Verifica se cliccato è bottone delete
    if (e.target.classList.contains('delete')) {
        e.target.closest('li').remove();
    }
});

// Oppure con matches()
lista.addEventListener('click', (e) => {
    if (e.target.matches('.delete')) {
        e.target.closest('li').remove();
    }
});

// Ora anche elementi futuri funzionano! ✅
document.querySelector('#add').addEventListener('click', () => {
    const li = document.createElement('li');
    li.innerHTML = 'Nuovo <button class="delete">X</button>';
    lista.append(li);
    // Funziona automaticamente! 🎉
});

// Vantaggi:
// ✅ Un solo listener (performance)
// ✅ Funziona con elementi futuri
// ✅ Meno memoria utilizzata

const container = document.querySelector('#container');

container.addEventListener('click', (e) => {
    // Trova elemento con data-action
    const action = e.target.closest('[data-action]');
    
    if (!action) return;  // Nessuna action trovata
    
    const actionType = action.dataset.action;
    
    switch(actionType) {
        case 'delete':
            action.closest('.item').remove();
            break;
        
        case 'edit':
            const item = action.closest('.item');
            console.log("Modifica:", item.dataset.id);
            break;
        
        case 'like':
            action.classList.toggle('liked');
            break;
    }
});

// HTML
// <div class="item" data-id="1">
//     <button data-action="edit">Modifica</button>
//     <button data-action="delete">Elimina</button>
//     <button data-action="like">Like</button>
// </div>

// Form submit
const form = document.querySelector('#form');

form.addEventListener('submit', (e) => {
    e.preventDefault();  // Blocca invio e reload pagina!
    
    // Gestione custom
    console.log("Form gestito via JavaScript");
});

// Link
const link = document.querySelector('a');

link.addEventListener('click', (e) => {
    e.preventDefault();  // Blocca navigazione
    
    console.log("Link cliccato ma non seguito");
});

// Click destro
document.addEventListener('contextmenu', (e) => {
    e.preventDefault();  // Blocca menu contestuale
    
    // Mostra menu custom
    console.log("Menu custom qui");
});

// Checkbox
const checkbox = document.querySelector('#check');

checkbox.addEventListener('click', (e) => {
    if (someCondition) {
        e.preventDefault();  // Blocca check/uncheck
        console.log("Checkbox non modificabile");
    }
});

// Drag & drop
const dropZone = document.querySelector('#drop-zone');

dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();  // Necessario per drop!
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    console.log("File droppato");
});

<div id="parent">
    <div id="child">
        <button id="btn">Click</button>
    </div>
</div>

const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
const btn = document.querySelector('#btn');

// Senza stopPropagation
parent.addEventListener('click', () => {
    console.log("Parent cliccato");
});

child.addEventListener('click', () => {
    console.log("Child cliccato");
});

btn.addEventListener('click', () => {
    console.log("Button cliccato");
});

// Click su button stampa:
// "Button cliccato"
// "Child cliccato"    ← bubbling
// "Parent cliccato"   ← bubbling

// Con stopPropagation
btn.addEventListener('click', (e) => {
    e.stopPropagation();  // Ferma bubbling!
    console.log("Button cliccato");
});

// Ora stampa solo:
// "Button cliccato"

// Caso d'uso: Modal/dropdown
const modal = document.querySelector('.modal');
const modalContent = document.querySelector('.modal-content');
const closeBtn = document.querySelector('.close');

// Chiudi cliccando fuori
modal.addEventListener('click', () => {
    modal.style.display = 'none';
});

// NON chiudere cliccando dentro
modalContent.addEventListener('click', (e) => {
    e.stopPropagation();  // Non propaga a modal
});