Resumos

Apontamentos universitários em formato Markdown do Obsidian.

Eventi in JavaScript

download Descarregar MD

Gli eventi sono il cuore dell'interattività in JavaScript. Permettono di eseguire codice in risposta ad azioni dell'utente (click, digitazione) o del browser (caricamento pagina).

Gestione degli Eventi

Esistono tre modi per gestire gli eventi.

Attributi HTML (Sconsigliato)

Vecchio stile, mischia logica e contenuto.

<button onclick="alert('Ciao!')">Cliccami</button>

Proprietà del DOM

Più pulito, ma permette un solo gestore per evento.

var btn = document.getElementById("myBtn");
btn.onclick = function() {
    console.log("Cliccato!");
};

Event Listener (Consigliato)

Standard moderno. Permette di aggiungere più gestori allo stesso evento e offre più controllo.

var btn = document.getElementById("myBtn");

btn.addEventListener("click", function(e) {
    console.log("Gestore 1");
});

btn.addEventListener("click", function(e) {
    console.log("Gestore 2"); // Eseguito dopo il primo
});

L'Oggetto Evento (e)

Quando si verifica un evento, il browser passa automaticamente un oggetto (spesso chiamato e o event) alla funzione di callback. Questo oggetto contiene dettagli sull'evento.

document.addEventListener("click", function(e) {
    console.log("Tipo:", e.type);       // "click"
    console.log("Target:", e.target);   // L'elemento cliccato
    console.log("X:", e.clientX);       // Coordinate mouse
});

Metodi Importanti dell'Oggetto Evento

  1. e.preventDefault(): Blocca l'azione predefinita del browser.
    • Esempio: Impedisce a un link di cambiare pagina o a un form di inviarsi. 
      link.addEventListener("click", function(e) {
e.preventDefault();
console.log("Navigazione bloccata");
});
  2. e.stopPropagation(): Ferma la propagazione dell'evento (vedi sotto).

    Flusso degli Eventi: Bubbling vs Capturing

    Quando clicchi su un elemento annidato (es. uno <span> dentro un <div> dentro <body>), l'evento non riguarda solo lo span, ma attraversa l'albero del DOM.

    Le due fasi

  3. Capturing (Cattura): L'evento scende dalla radice (window) fino al target.
  4. Target: L'evento raggiunge l'elemento.
  5. Bubbling (Risalita): L'evento risale dal target fino alla radice. (Default)

    Esempio Pratico

    <div id="padre">
<button id="figlio">Clicca</button>
</div>
// Bubbling (Default: false)
document.getElementById("padre").addEventListener("click", () => console.log("Padre"), false);
document.getElementById("figlio").addEventListener("click", () => console.log("Figlio"), false);

// Output al click su figlio:
// 1. "Figlio"
// 2. "Padre"

Se volessimo intercettare l'evento prima che arrivi al figlio (fase di Capturing), useremmo true come terzo parametro.

Tipi di Eventi Comuni

Mouse

  • click: Pressione e rilascio tasto sinistro.
  • dblclick: Doppio click.
  • mouseover / mouseout: Il mouse entra/esce dall'elemento.
  • mousemove: Il mouse si muove sopra l'elemento.

    Tastiera

  • keydown: Tasto premuto.
  • keyup: Tasto rilasciato.
  • keypress: (Deprecato) Tasto che produce un carattere.

    Form

  • submit: Invio del modulo.
  • focus / blur: Un campo ottiene/perde il focus.
  • change: Il valore di un input è cambiato (e perso focus).
  • input: Il valore cambia (mentre si digita).

    Finestra/Documento

  • load: Pagina e risorse (immagini) caricate completamente.
  • DOMContentLoaded: HTML caricato (senza aspettare le immagini). Molto usato.
  • resize: Ridimensionamento finestra.
  • scroll: Scorrimento pagina.

    Esempio: Validazione Form

    
var form = document.getElementById("loginForm");

form.addEventListener("submit", function(e) { var user = document.getElementById("username").value;

if (user === "") {
    e.preventDefault(); // Blocca l'invio
    alert("Inserisci un nome utente!");
}

});