logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

DOM e gli eventi HTML

Quando si naviga su Internet, si interagisce costantemente con diversi elementi delle pagine web. Nella maggior parte dei casi, questi eventi HTML sono possibili con JavaScript e il DOM. In questa lezione, vediamo come funzionano e come creare eventi HTML.

Come funzionano gli eventi HTML 

Un evento HTML può essere un click su un pulsante, un passaggio del mouse su un elemento, il click su un pulsante della tastiera, e molti altri.

Ad esempio, proviamo a visualizzare un alert al click di un pulsante.

<button onclick="messaggio()">Messaggio</button>

<script>
function messaggio() {
  alert("Questo messaggio appare al click del pulsante");
}
</script>

Nell'esempio, puoi vedere come funziona la sintassi degli eventi:

nome_evento = "funzione_da_eseguire".

Tutti gli eventi, quando avvengono, possono eseguire una funzione.

Gli eventi di mouse

EventoDescrizione
onclick Si verifica quando l'utente fa click su un elemento.
oncontextmenu Si verifica quando l'utente fa click con il tasto destro del mouse su un elemento per aprire il menu.
ondblclick Si verifica quando l'utente fa doppio click su un elemento.
onmousedown Si verifica quando l'utente tiene premuto su un elemento.
onmouseenter Si verifica quando il mouse entra nell'area di un elemento.
onmouseleave Si verifica quando il mouse esce dall'area di un elemento.
onmousemove Si verifica quando il mouse si sposta all'interno dell'area di un elemento.
onmouseover Si verifica quando il mouse è sopra un elemento.
onmouseout Si verifica quando il mouse non è più sopra un elemento.
onmouseup Si verifica quando l'utente rilascia il pulsante del mouse su un elemento dopo averlo tenuto premuto.

Vediamo qualche esempio.

Esempio con onmouseenter e onmouseleave

Proviamo a cambiare il colore dello sfondo da nero a rosso quando il mouse entra nell'elemento blocco. Se il mouse esce dall'area di blocco, il colore dello sfondo ritorna a nero. Per fare ciò, utilizziamo onmouseenter e onmouseleave.

<style>
#blocco {
  width:100px;  /* Larghezza */
  height:100px;  /* Altezza */
  background-color:black;  /* Colore sfondo */
  color:white;  /* Colore testo */
}
</style>

<div id="blocco" onmouseenter="entrato()" onmouseleave="uscito()">
  Un blocco
</div>

<script>
function entrato() {
  document.getElementById("blocco").style.backgroundColor = "red";
}
function uscito() {
  document.getElementById("blocco").style.backgroundColor = "black";
}
</script>

Nell'esempio, quando il mouse si trova sopra l'elemento, si attiva l'evento onmouseenter che esegue la funzione entrato(). Quando il mouse esce dall'elemento, si attiva l'evento onmouseleave che esegue la funzione uscito().

Esempio con ondblclick e onmousedown

In questo esempio, vogliamo modificare la scritta di blocco in base all'evento dell'utente. In particolare, se viene cliccato due volte l'elemento, allora apparirà una scritta. Se invece viene tenuto premuto l'elemento, la scritta sarà diversa. Per farlo, utilizziamo ondblclickonmousedown.

<style>
#blocco {
  width:100px;  /* Larghezza */
  height:100px;  /* Altezza */
  background-color:lightgrey;  /* Colore sfondo */
}
</style>

<div id="blocco" ondblclick="doppio_click()" onmousedown="tenere_premuto()">
  Un blocco
</div>

<script>
function doppio_click() {
  document.getElementById("blocco").textContent = "Hai cliccato due volte";
}
function tenere_premuto() {
  document.getElementById("blocco").textContent = "Hai tenuto premuto";
}
</script>

In questo caso, quando si clicca due volte sull'elemento, viene eseguita la funzione doppio_click(). Invece, se si tiene premuto, viene eseguita la funzione tenere_premuto().

Gli eventi copia, taglia, incolla

EventoDescrizione
oncopy Si verifica quando l'utente copia un valore all'interno di un elemento.
oncut Si verifica quando l'utente taglia un valore all'interno di un elemento.
onpaste Si verifica quando l'utente incolla un valore all'interno di un elemento.

Vediamo un esempio.

Esempio con oncopy e onpaste.

Proviamo a visualizzare un alert quando l'utente copia il valore all'interno dell'input e quando ne incolla uno.

<input type="text" oncopy="copia()" onpaste="incolla()" value="Valore di esempio">

<script>
function copia() {
  alert("Hai copiato un valore");
}
function incolla() {
  alert("Hai incollato un valore");
}
</script>

In questo caso, quando si copia il valore dell'input, viene eseguita la funzione copia(). Invece, se si incolla un testo, viene eseguita la funzione incolla().

Eventi dei form

EventoDescrizione
onblur Si verifica quando un elemento perde il focus, ovvero quando l'utente esce dall'area di input dell'elemento.
onchange Si verifica quando il valore di un elemento cambia, come ad esempio una casella di testo o una selezione.
onfocus Si verifica quando un elemento ottiene il focus, ovvero quando l'utente entra nell'area di input dell'elemento.
oninput Si verifica quando un elemento riceve un input dall'utente, ad esempio quando si digita testo in una casella di input.
oninvalid Si verifica quando un elemento non supera la convalida durante l'invio di un modulo.
onreset Si verifica quando l'utente resetta un modulo, ripristinando i valori predefiniti.
onsearch Si verifica quando l'utente esegue una ricerca all'interno di un elemento, ad esempio un campo di ricerca.
onselect Si verifica quando l'utente seleziona del testo all'interno di un elemento, ad esempio in un campo di testo.
onsubmit Si verifica quando l'utente invia un modulo.

Vediamo un esempio.

Esempio con onfocus, onblur e onsubmit

Nell'esempio, abbiamo un form in cui l'utente deve inserire una password. Quando si scrive nel campo di testo, appare una scritta in cui vengono indicati i requisiti della password. Se si clicca fuori dall'input (perdendo il focus), la scritta sparisce. Quando viene inviato il form, viene visualizzato un alert di avviso. Per questo, utilizziamo onfocus, onblur e onsubmit.

<form onsubmit="inviato()">
  <input type="password" onfocus="visualizza()" onblur="nascondi()">
  <input type="submit" value="Invia">
  <p id="requisiti" style="display:none">La password deve contenere 8 caratteri</p>
</form>

<script>
function visualizza() {
  document.getElementById("requisiti").style.display = "block";
}
function nascondi() {
  document.getElementById("requisiti").style.display = "none";
}
function inviato() {
  alert("Form inviato!");
}
</script>

In questo caso, quando si scrive nell'input, viene eseguita la funzione visualizza(). Se si esce dall'input, viene eseguita nascondi(). Invece, se si invia il form, viene eseguita la funzione inviato().

Eventi della tastiera

EventoDescrizione
onkeydown Si verifica quando viene tenuto premuto un pulsante sulla tastiera.
onkeypress Si verifica quando è stato premuto un tasto sulla tastiera.
onkeyup Si verifica quando viene lasciato un pulsate sulla tastiera.

Vediamo un esempio.

Esempio con onkeydown e onkeyup

Proviamo a visualizzare una scritta quando l'utente ha premuto una lettera, e sparisce quando l'utente smette di premerla. Utilizziamo onkeydown e onkeyup.

<input type="text" onkeydown="premuto()" onkeyup="lasciato()">
<p id="avviso" style="display:none">Stai premendo un tasto</p>

<script>
function premuto() {
  document.getElementById("avviso").style.display = "block";
}
function lasciato() {
  document.getElementById("avviso").style.display = "none";
}
</script>

Il metodo addEventListener()

Il metodo addEventListener() permette di controllare se un evento specificato è attivo oppure no. Utilizzare questo metodo è utile se non si vuole inserire gli attributi direttamente nell'HTML, oppure semplicemente per mantenere l'ordine nel codice.

La sintassi di questo metodo è: elemento.addEventListener(nome_evento, funzione). Il nome_evento è il nome dell'evento, che è lo stesso degli attributi che abbiamo visto prima, rimuovendo "on" (ad esempio, onclick diventa click). La funzione non deve avere gli argomenti.

Vediamo un esempio con un evento di click.

<button id="pulsante">Clicca il pulsante</button>
<p id="avviso" style="display:none">Hai premuto il pulsante</p>

<script>
const pulsante = document.getElementById("pulsante");
pulsante.addEventListener("click", premuto);

function premuto() {
  document.getElementById("avviso").style.display = "block";
}
</script>

Nell'esempio, la scritta appare quando si clicca sul pulsante.

Il metodo addEventListener() permette di inserire lo script direttamente all'interno di una funzione function(){ ... }.

<button id="pulsante">Clicca il pulsante</button>
<p id="avviso" style="display:none">Hai premuto il pulsante</p>

<script>
const pulsante = document.getElementById("pulsante");
pulsante.addEventListener("click", function() { 
  document.getElementById("avviso").style.display = "block";
});
</script>

Prova!Completa gli spazi vuoti con il testo appropriato.
<!-- Esegui la funzione al click del pulsante -->
<button ="funzione()" id="pulsante">

<!-- Esegui la funzione al click con addEventListener() -->
<script>
document.getElementById("elemento").addEventListener("", funzione);
</script>

Prova!Scegli l'opzione corretta tra quelle elencate.
<!-- Esegui la funzione quando l'utente tiene premuto il mouse sull'elemento -->
<p ______="funzione()">Elemento</p>