EVENTI IN JAVASCRIPT
Gli eventi HTML sono “cose” che accadono agli elementi HTML. Quando JavaScript viene utilizzato nelle pagine HTML, esso può “reagire” a questi eventi.
EVENTI HTML
Un evento HTML può essere qualcosa che fa il browser o qualcosa che fa un utente. Ecco alcuni esempi di eventi HTML:
- Una pagina Web HTML ha terminato il caricamento
- Un campo di input HTML è stato modificato
- È stato fatto clic su un pulsante HTML
Spesso, quando accadono eventi, potresti voler fare qualcosa. JavaScript ti consente di eseguire codice quando vengono rilevati eventi. HTML consente di aggiungere attributi del gestore eventi, con codice JavaScript, agli elementi HTML.
Con virgolette singole:
<element event=‘some JavaScript‘>
Con virgolette doppie:
<element event=“some JavaScript“>
Nell’esempio seguente, un attributo onclick (con codice) viene aggiunto a un elemento <button>:
<button onclick=”document.getElementById(‘demo’).innerHTML = Date()“>The time is?</button>
Nell’esempio sopra, il codice JavaScript cambia il contenuto dell’elemento con id=”demo”. Nell’esempio successivo, il codice cambia il contenuto del proprio elemento (usando this.innerHTML):
<button onclick=”this.innerHTML = Date()“>The time is?</button>
Il codice JavaScript è spesso lungo diverse righe. È più comune vedere gli attributi dell’evento che chiamano funzioni:
<button onclick=”displayDate()“>The time is?</button>
<script>
function displayDate() {
document.getElementById(“demo”).innerHTML = Date();
}
</script>
Ecco un elenco di alcuni eventi HTML comuni:
JAVASCRIPT EVENT HANDLER
I gestori di eventi possono essere utilizzati per gestire e verificare l’input dell’utente, le azioni dell’utente e le azioni del browser:
- Cose che dovrebbero essere fatte ogni volta che viene caricata una pagina
- Cose che dovrebbero essere fatte quando la pagina è chiusa
- Azione da eseguire quando un utente fa clic su un pulsante
- Contenuto che dovrebbe essere verificato quando un utente inserisce i dati
E altro ancora…
È possibile utilizzare molti metodi diversi per consentire a JavaScript di funzionare con gli eventi:
- Gli attributi dell’evento HTML possono eseguire direttamente il codice JavaScript
- Gli attributi dell’evento HTML possono chiamare funzioni JavaScript
- Puoi assegnare le tue funzioni di gestione degli eventi agli elementi HTML
- È possibile impedire l’invio o la gestione di eventi
E altro ancora…
APPROFONDIMENTO AI
In JavaScript, gli eventi rappresentano interazioni o cambiamenti che avvengono all’interno della pagina web, come il clic di un pulsante, la pressione di un tasto, lo scorrimento di una pagina o il caricamento di un file. Gli eventi permettono agli sviluppatori di creare un’interfaccia utente interattiva rispondendo in modo dinamico alle azioni dell’utente o ad altri fattori esterni.
Descrizione dettagliata dei principali eventi in JavaScript:
1. Eventi di mouse:
•click: si attiva quando un utente fa clic su un elemento.
•dblclick: si attiva quando un utente fa doppio clic su un elemento.
•mouseover: si attiva quando il mouse passa sopra un elemento.
•mouseout: si attiva quando il mouse esce da un elemento.
•mousemove: si attiva quando il mouse viene mosso all’interno di un elemento.
•mousedown: si attiva quando viene premuto un pulsante del mouse su un elemento.
•mouseup: si attiva quando il pulsante del mouse viene rilasciato su un elemento.
2. Eventi di tastiera:
•keydown: si attiva quando un tasto viene premuto.
•keyup: si attiva quando un tasto viene rilasciato.
•keypress: si attiva quando un tasto viene premuto, ma è considerato deprecato poiché non gestisce bene tutte le tipologie di tasti, come i tasti funzione.
3. Eventi di form:
•submit: si attiva quando un modulo viene inviato (di solito da un pulsante di submit).
•change: si attiva quando cambia il valore di un campo di input, select o textarea.
•focus: si attiva quando un elemento (ad esempio un input) ottiene il focus.
•blur: si attiva quando un elemento perde il focus.
4. Eventi di finestra (Window Events):
•load: si attiva quando la pagina e le risorse collegate, come immagini e script, sono completamente caricate.
•resize: si attiva quando la finestra del browser viene ridimensionata.
•scroll: si attiva quando la pagina viene fatta scorrere (scrollata).
•unload: si attiva quando una pagina viene chiusa o l’utente naviga via da essa.
5. Eventi di touch (per dispositivi touch-screen):
•touchstart: si attiva quando un dito tocca lo schermo.
•touchmove: si attiva quando un dito viene mosso sullo schermo.
•touchend: si attiva quando un dito viene sollevato dal touchscreen.
6. Eventi di input e di selezione:
•input: si attiva ogni volta che un valore di input cambia.
•select: si attiva quando del testo viene selezionato in un campo di testo o textarea.
7. Eventi personalizzati:
È possibile creare eventi personalizzati in JavaScript utilizzando la classe Event o CustomEvent. Questi eventi possono essere usati per gestire situazioni specifiche nel codice, come un aggiornamento dell’interfaccia utente.
Esempio:
let eventoPersonalizzato = new CustomEvent(‘mioEvento‘, {
detail: { messaggio: ‘Questo è un evento personalizzato‘ }
});
// Aggiungi un listener
document.addEventListener(‘mioEvento‘, function(e) {
console.log(e.detail.messaggio);
});
// Emetti l’evento
document.dispatchEvent(eventoPersonalizzato);
Gestione degli eventi
In JavaScript, gli eventi possono essere gestiti con tre principali approcci:
1. Attribuire un evento direttamente nell’HTML:
<button onclick=”alert(‘Hai cliccato!’)“>Cliccami</button>
2. Usare la proprietà event handler dell’elemento:
const bottone = document.getElementById(‘mioBottone‘);
bottone.onclick = function() {
alert(‘Hai cliccato!‘);
};
3. Usare il metodo addEventListener:
Questo metodo permette di associare più funzioni a un singolo evento e offre un maggiore controllo, come l’opzione di catturare eventi durante la propagazione.
const bottone = document.getElementById(‘mioBottone‘);
bottone.addEventListener(‘click‘, function() {
alert(‘Hai cliccato!‘);
});
Propagazione degli eventi
Gli eventi in JavaScript seguono un modello di propagazione che coinvolge tre fasi principali:
1. Capturing Phase: l’evento viene catturato dall’elemento più esterno e propagato verso il target.
2. Target Phase: l’evento raggiunge l’elemento target.
3. Bubbling Phase: l’evento risale dall’elemento target verso gli elementi superiori nella gerarchia DOM.
È possibile prevenire il bubbling di un evento utilizzando event.stopPropagation().
Prevenire il comportamento predefinito
Alcuni eventi, come i clic sui link o l’invio di moduli, hanno comportamenti predefiniti. Per prevenire tali comportamenti, si utilizza event.preventDefault(). Esempio:
document.getElementById(‘mioLink‘).addEventListener(‘click‘, function(event) {
event.preventDefault();
alert(‘Comportamento predefinito prevenuto!‘);
});
Riassunto
Gli eventi in JavaScript sono fondamentali per rendere le applicazioni web interattive. Gli sviluppatori possono gestire una vasta gamma di eventi per rispondere alle azioni degli utenti e manipolare dinamicamente l’interfaccia utente.
Scrivi un commento