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.