Tra gli eventi maggiormente utilizzati nello sviluppo di un'interfaccia Web ci sono quelli relativi al mouse. Oltre al click, che abbiamo già visto, possiamo intercettare l'evento doppio click, come mostrato nel seguente esempio:
<script>
var myParagrafo = document.getElementById("paragrafo");
myParagrafo.ondblclick = function(e) {
e.target.innerHTML = "Hai fatto doppio click sul paragrafo!";
};
</script>
<p id="paragrafo">Clicca su questo paragrafo</p>L'esempio mostra un paragrafo il cui testo cambia quando l'utente fa un doppio click su di esso.
Oltre al click abbiamo la possibilità di intercettare eventi più specifici delle diverse fasi di interazione con il mouse. Possiamo ad esempio individuare il momento in cui l'utente preme sul pulsante del mouse (mousedown) e quando lo lascia (mouseup), quando il cursore viene spostato (mousemove) e quando entra (mouseover) o esce (mouseout) dall'area occupata da un elemento HTML.
mouseover e mouseout
Questo ci offre la possibilità di creare effetti grafici interessanti. Ad esempio, il seguente codice mostra come cambiare l'aspetto grafico di un paragrafo quando si passa su di esso con il cursore del mouse:
<style>
.overClass {font-weight: bold; color: red;}
.outClass {font-weight: normal; color: black;}
</style>
<script>
var myParagrafo = document.getElementById("paragrafo");
myParagrafo.onmouseover = function(e) { e.target.className = "overClass"; };
myParagrafo.onmouseout = function(e) { e.target.className = "outClass"; };
</script>
<p id="paragrafo">Passa il mouse su questo paragrafo</p>Gli eventi mouseover e mouseout possono presentare qualche effetto indesiderato quando vengono gestiti su elementi che hanno al loro interno altri elementi. Consideriamo infatti la seguente gerarchia di elementi:
<div id="mainDiv">
<img id="img" src="miaImmagine.jpg" />
<div id="otherDiv">
<p>Questo è un paragrafo</p>
</div>
</div>Gli eventi mouseover e mouseout si verificano ogni volta che entriamo ed usciamo su ciascuno degli elementi discendenti del <div> mainDiv. Anche se gli elementi discendenti non hanno un loro gestore di evento, nella fase di bubbling l'evento viene passato al gestore dell'elemento genitore. Questo vuol dire che il gestore di questi eventi associato a mainDiv verrà eseguito diverse volte al muoversi del mouse anche se il cursore del mouse non è uscito dall'area di mainDiv. Ciò potrebbe non corrispondere al comportamento desiderato.
mouseenter e mouseleave
Se vogliamo concentrarci soltanto sugli eventi di entrata ed uscita sull'area occupata dall'elemento padre dobbiamo utilizzare due eventi alternativi: mouseenter e mouseleave.
Il loro utilizzo è sostanzialmente analogo a mouseover e mouseout, ma a differenza di questi ultimi non vengono coinvolti gli elementi discendenti. In termini più strettamente tecnici, questi due eventi non prevedono la fase di bubbling e pertanto l'evento non si propaga verso gli elementi genitori.
L'oggetto MouseEvent
Nella gestione degli eventi del mouse il browser crea un oggetto MouseEvent specifico che fornisce informazioni aggiuntive rispetto all'oggetto Event standard.
Ad esempio, possiamo individuare quale pulsante è stato premuto sfruttando la proprietà button, che può assumere uno dei seguenti valori:
| Valore | Descrizione |
|---|---|
| 0 | Pulsante sinistro |
| 1 | Pulsante centrale |
| 2 | Pulsante destro |
Il seguente è un esempio di script che intercetta il pulsante premuto:
var myParagrafo = document.getElementById("paragrafo");
myParagrafo.onmousedown = function(e) {
switch(e.button) {
case 0:
console.log("Hai cliccato con il pulsante sinistro");
break;
case 1:
console.log("Hai cliccato con il pulsante centrale");
break;
case 2:
console.log("Hai cliccato con il pulsante destro");
break;
}
};Se abbiamo bisogno di intercettare la pressione di più pulsanti contemporaneamente dobbiamo allora ricorrere alla proprietà buttonsbuttons, i cui valori di base sono di seguito riepilogati:
| Valore | Rapp. binaria | Descrizione |
|---|---|---|
| 1 | 001 |
Pulsante sinistro |
| 2 | 010 |
Pulsante centrale |
| 4 | 100 |
Pulsante destro |
La combinazione di più pulsanti genera un valore corrispondente all'operazione binaria OR (|) dei valori dei singoli pulsanti. Se vengono, ad esempio, premuti contemporaneamente il pulsante sinistro e quello destro otterremo come valore il risultato dell'operazione 1|4, cioè 5. La scelta dei valori di base è stata fatta in modo da semplificare il calcolo del valore risultante corrispondente in pratica alla somma dei valori dei singoli pulsanti.
Posizione del cursore
Una delle informazioni più interessanti è la posizione del cursore. Anche in questo caso abbiamo a disposizione delle proprietà dell'oggetto MouseEvent che ci consentono di individuare le coordinate del cursore del mouse:
- clientX e clientY, coordinate rispetto alla finestra;
- pageX e pageY, coordinate rispetto alla pagina.
Mentre la prima coppia di coordinate indentifica la posizione del cursore all'interno della finestra, quindi indipendentemente dall'eventuale scrolling della pagina, la seconda coppia individua la posizione del cursore all'interno della pagina.
Per fare un esempio, il seguente codice fornisce entrambi i tipi di coordinate del cursore man mano che lo spostiamo sulla pagina:
document.onmousemove = function(e) {
console.log("Posizione rispetto alla finestra: " + e.clientX + ", " + e.clientY);
console.log("Posizione rispetto alla pagina: " + e.pageX + ", " + e.pageY);
};relatedTarget
Un'altra proprietà che può risultare utile soprattutto nella gestione degli eventi mouseover, mouseout, mouseenter e mouseleave è relatedTarget. Mentre, come già sappiamo, la proprietà target individua l'oggetto destinatario dell'evento, relatedTarget individua l'oggetto da cui proviene o verso cui va il cursore del mouse nel suo spostamento. Ad esempio, nel caso di mouseleave questa proprietà indica su quale elemento si è spostato il cursore del mouse dopo aver lasciato l'area dell'elemento corrente:
myParagrafo.onmouseleave = function(e) {
console.log("Il cursore si trova ora sull'elemento " + e.relatedTarget.id);
};contextmenu
Un evento che può risultare utile per personalizzare il comportamento standard del browser è contextmenu. Questo evento si verifica quando l'utente clicca con il tasto destro del mouse sulla pagina o su un elemento. Normalmente il browser visualizza il menu contestuale predefinito, ma sfruttando contextmenu abbiamo la possibilità di visualizzare un nostro menu o di effettuare altre azioni.
Il seguente esempio mostra come associare un menu personalizzato da visualizzare in corrispondenza del punto in cui è stato premuto il tasto destro del mouse:
myParagrafo.oncontextmenu = function(e) {
var myMenu = document.getElementById("menu");
myMenu.style.position = "absolute";
myMenu.style.left = e.pageX + "px";
myMenu.style.top = e.pageY + "px";
myMenu.style.visibility = "visible";
e.preventDefault();
};Dal codice dell'esempio vediamo come impostare le coordinate del punto in cui verrà visualizzato il menu e come inibire il comportamento predefinito del browser.