Eventi del mouse

Nella lezione precedente, abbiamo visto quali sono gli eventi della tastiera. In questa lezione, invece, vediamo quali sono gli eventi del mouse gestibili con jQuery.

La sintassi rimane la stessa di quella già usata precedentemente, utilizzando il metodo .on():

$(elemento).on(tipoEvento, funzione).

Lista degli eventi del mouse

Vediamo la lista completa di tutti gli eventi del mouse disponibili.

Evento	Descrizione
`click`	Si verifica quando un elemento viene cliccato.
`dblclick`	Si verifica quando un elemento viene cliccato due volte.
`mousedown`	Si verifica quando un pulsante del mouse viene premuto su un elemento.
`mouseenter`	Si verifica quando il puntatore del mouse entra nell'area di un elemento.
`mouseleave`	Si verifica quando il puntatore del mouse esce dall'area di un elemento.
`mousemove`	Si verifica quando il puntatore del mouse si muove su un elemento.
`mouseout`	Si verifica quando il puntatore del mouse esce dall'area di un elemento o di uno dei suoi figli.
`mouseover`	Si verifica quando il puntatore del mouse entra nell'area di un elemento o di uno dei suoi figli.
`mouseup`	Si verifica quando un pulsante del mouse viene rilasciato su un elemento.

Vediamoli in dettaglio.

L'evento "click"

L'evento "click" si verifica quando l'utente clicca con il mouse (con il tasto sinistro) su un elemento specifico.

$("#elemento").on("click", function() {
  alert("Hai cliccato sull'elemento!");
});

In questo esempio, se l'utente clicca sull'elemento #elemento, allora viene visualizzato un alert.

Vediamo un esempio utilizzando un pulsante.

<button>Aggiungi 5 al numero</button>
<p>Numero: <span id="numero">0</span>

<script>
$("button").on("click", function() {
  var numeroPrecedente = $("#numero").text();
  $("#numero").text(parseInt(numeroPrecedente) + 5);
});
</script>

Nell'esempio, quando l'utente clicca sul pulsante, l'evento di click esegue la funzione function(): recupera il contenuto dell'elemento #numero con il metodo .text() e viene salvato nella variabile numeroPrecedente. Poi, sempre con .text(), viene modificato il contenuto dell'elemento #numero: il valore viene convertito in numero utilizzando parseInt() (che puoi approfondire nella lezione dei metodi dei numeri di JavaScript) e sommato a 5.

L'evento "dblclick"

L'evento "dblclick" si verifica quando l'utente esegue due click rapidi consecutivi su un elemento.

$("#elemento").on("dblclick", function() {
  alert("Hai eseguito un doppio clic sull'elemento!");
});

L'evento "mousedown"

L'evento "mousedown" si verifica quando qualsiasi pulsante del mouse viene premuto su un elemento.

$("#elemento").on("mousedown", function() {
  alert("Hai premuto un pulsante del mouse su questo elemento!");
});

Qual è la differenza tra click e mousedown?
L'evento "mousedown" si verifica appena l'utente clicca su un elemento con qualsiasi pulsante del mouse (il tasto destro, sinistro o centrale).

L'evento "click", invece, si verifica soltanto se l'utente clicca con il tasto destro del mouse sull'area dell'elemento e rilascia il tasto, sempre restando nell'area dell'elemento. Se clicca sull'elemento, ma lo rilascia fuori da esso, non si verificherà.

L'evento "mouseenter"

L'evento "mouseenter" si verifica quando il puntatore del mouse entra nell'area di un elemento.

$("#elemento").on("mouseenter", function() {
  alert("Il puntatore del mouse e' entrato nell'area di questo elemento!");
});

L'evento "mouseleave"

L'evento "mouseleave" si verifica quando il puntatore del mouse esce dall'area di un elemento.

$("#elemento").on("mouseleave", function() {
  alert("Il puntatore del mouse e' uscito dall'area di questo elemento!");
});

L'evento "mousemove"

L'evento "mousemove" si verifica se il puntatore del mouse si muove su un elemento.

$("#elemento").on("mousemove", function() {
  console.log("Il puntatore del mouse si sta muovendo su questo elemento.");
});

In questo caso, utilizziamo console.log() per evitare troppi popup (non conosci console.log()? Leggi di più nella lezione JavaScript).

L'evento "mouseout"

L'evento "mouseout" si verifica quando il puntatore del mouse esce dall'area di un elemento o di uno dei suoi figli.

$("#elemento").on("mouseout", function() {
  alert("Il puntatore del mouse e' uscito!");
});

L'evento "mouseover"

L'evento "mouseover" si verifica quando il puntatore del mouse entra nell'area di un elemento o di uno dei suoi figli.

$("#elemento").on("mouseover", function() {
  alert("Il puntatore del mouse e' entrato!");
});

L'evento "mouseup"

L'evento "mouseup" si verifica quando un pulsante del mouse viene rilasciato su un elemento.

$("#elemento").on("mouseup", function() {
  alert("Hai rilasciato il pulsante del mouse su questo elemento!");
});

Prova!Completa gli spazi vuoti con il testo appropriato.

// Visualizza l'alert quando l'utente clicca sull'elemento

$("#elemento).("", function() {
alert("Hai cliccato il pulsante!");
});

Prova!Scegli l'opzione corretta tra quelle elencate.

// Cambia il coloro di sfondo all'elemento quando l'utente entra
// con il cursore del mouse nel div

$("#elemento").on("__", function() {
$("#elemento").css("background-color","yellow");
});

	focusout
	mouseenter
	mouseleave