====== Gli eventi ====== [[namespace:javascript|Pagina principale di Javascript]] Tutto il codice visto fino veniva eseguito automaticamente dalla pagina, non c'era nessuna interazione con l'utente punto. La vera forza di Javascript consiste nel poter modificare la pagina attuale in risposta a delle azioni compiute dall'utente. Queste interazioni con l'utente sono scaturite da degli **eventi**. Eccone alcuni: ^Evento^Attributo^ Quando avviene^ |change| onchange |cambiamento di un campo di un form| |click|onclick | click su un elemento| |mouse over|onmouseover | il mouse viene spostato su un elemento| |mosue out| onmouseout | il mouse viene spostato fuori da un elemento| |key down |onkeydown | pressione di un tasto della tastiera| |load |onload |il browser ha finito di caricare la pagina| Quando si verifica un evento è possibile eseguire del codice Javascript, solitamente una funzione. Gli eventi vanno esplicitamente inseriti dentro i tag sui quali vogliamo porre l'attenzione usando l'attributo corrispondente all'evento. ===== Event Listener===== Il metodo addEventListener è utilizzato per aggiungere un gestore di eventi a un elemento della pagina. Quando un determinato tipo di evento si verifica sull'elemento, viene chiamato il gestore di eventi associato ed esegue il codice associato a quell'evento. Anche questo metodo è utilizzato per rendere interattive le pagine web, consentendo di definire comportamenti specifici per vari eventi, come clic del mouse, pressioni del tasto, passaggi del mouse sopra un elemento e così via. // Otteniamo un riferimento all'elemento del DOM tramite il suo ID const myButton = document.getElementById('myButton'); // Aggiungiamo un gestore di eventi per il clic del mouse myButton.addEventListener('click', function() { // Qui va il codice che si desidera eseguire quando l'evento avviene console.log('Il pulsante è stato cliccato!'); }); ====Evento DOMContentLoaded==== Un event listner molto utile è il DOMContentLoaded, che ci consente di associare del codice al caricamento della pagina: document.addEventListener('DOMContentLoaded', function() { // Il codice da eseguire quando il documento è completamente caricato console.log('Il documento è stato completamente caricato.'); }); __**Il codice compreso tra le due parentesi graffe verrà eseguito solo se la pagina è stata completamente caricata.**__ Questo è utile per evitare di inserire il codice sempre sotto degli oggetti sui quali vogliamo operare. Negli esempi di script visti fino ad ora, il codice che agiva su un elemento era inserito nelle linee succsive all'elemento stesso. Questo è dovuto al fatto che la pagina che viene letta dall'alto verso il basso, se non inesriamo lo scirpt sotto, l'oggetto a cui vogliamo fare rifermento non esiste. Inserire il codice dentro il listener sull'evento DOMContentLoaded, fa sì che nel momento in cui viene eseguito uno script tutti gli elementi della pagina sono nel DOM. Quando un elemento esiste nel DOM può essere manipolato con Javascript. Senza event listner //non fuziona - prima script e poi HTML
Ciao
//fuziona - prima HTML e poi script
Ciao
Usando l'event listner: Event listner
Ciao