Eventi HTML in Javascript
Gli eventi HTML consentono al tuo codice JavaScript di rispondere alle azioni degli utenti, come clic, movimenti del mouse, input da tastiera e altro ancora. Vediamo alcuni degli eventi HTML più comuni e come possono essere gestiti con JavaScript.
Elenco degli Eventi HTML
Ecco un elenco di eventi HTML comunemente utilizzati:
onclick
: si verifica quando un elemento viene cliccato.onmouseover
: si verifica quando il puntatore del mouse entra nell’area di un elemento.onmouseout
: si verifica quando il puntatore del mouse esce dall’area di un elemento.onkeydown
: si verifica quando un tasto sulla tastiera viene premuto.onkeyup
: si verifica quando un tasto sulla tastiera viene rilasciato.onchange
: si verifica quando il valore di un elemento cambia.onsubmit
: si verifica quando un form viene inviato.onload
: si verifica quando un elemento viene caricato.onunload
: si verifica quando un elemento viene scaricato (chiuso).
Gestione degli Eventi HTML
Puoi gestire gli eventi HTML direttamente nell’HTML stesso utilizzando attributi come onClick
, onMouseOver
, ecc.
Evento di Clic:
<button onclick="showMessage()">Cliccami!</button>
<script> function showMessage() { alert("Hai cliccato il pulsante!"); }</script>
Evento Mouse Over (Passaggio del Mouse):
<div onmouseover="changeColor(this)">Passa il mouse qui</div>
<script> function changeColor(element) { element.style.backgroundColor = "giallo"; }</script>
Evento Keydown (Premere un Tasto):
<input id="campo-testo" type="text" />
<script> const campoTesto = document.getElementById("campo-testo"); campoTesto.onkeydown = function (event) { alert("Hai premuto il tasto " + event.key); };</script>
Conclusioni
Gli eventi HTML e JavaScript sono fondamentali per creare interazioni dinamiche e coinvolgenti nelle tue pagine web. Puoi gestire gli eventi direttamente nell’HTML utilizzando attributi come onClick
, o utilizzare il metodo on
in JavaScript per gestire in modo più flessibile gli eventi. La gestione degli eventi ti consente di creare esperienze utente più interattive e personalizzate.