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
| Evento | Descrizione |
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 ondblclick e onmousedown.
<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
| Evento | Descrizione |
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
| Evento | Descrizione |
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
| Evento | Descrizione |
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>