Categorie
Javascript Programmazione

{JS} DOM API: Eventi del mouse e l’oggetto “event”

Eventi del mouse

Riportiamo la selezione di eventi che si verificano quando l’utente interagisce con il mouse, il trackpad, o il touchscreen (uso limitato)

clickL’utente preme e poi rilascia un tasto del mouse su un elemento
dblclickL’utente effettua una doppio-click su un elemento
mousedownL’utente preme un tasto del mouse su un elemento
mouseupL’utente rilascia un tasto del mouse su un elemento
mousemoveL’utente sposta il mouse (no-touchscreen)
mouseoverL’utente sposta il mouse su un elemento (no-touchscreen)
mouseoutL’utente sposta il mouse da un elemento (no-touchscreen)

Proprietà aggiuntive dell’oggetto “Event”

Tra gli eventi utilizzati nello sviluppo di un’interfaccia Web ci sono alcuni eventi che necessitano di maggiori specifiche sulle possibilità di utilizzo dell’oggetto “event”.

L’oggetto “event” oltre alle proprietà standard di cui abbiamo già parlato ha ulteriori proprietà richiamabili a secondo dell’evento utilizzato.
Tratteremo tutte le proprietà dell’oggetto event relative agli eventi del mouse.

Le raggruppiamo qui sotto per poi mostrare con quali eventi sono utilizzabili.

Note: in altre documentazioni potremmo sentire parlare dell'oggetto "MouseEvent" esso fa sempre riferimento all'oggetto "Event".
Proprietà Descrizione
event.targetrestituisce il target dell’evento; ovvero l’elemento che subisce l’interazione.
event.typerestituisce il tipo di evento lanciato.
event.cancelableannulla il comportamento standard dell’elemento.
event.buttonindica quale pulsante è stato premuto sul mouse per attivare l’evento
event.buttonbuttonindica quali pulsanti sono stati premuti contemporaneamente sul mouse per attivare l’evento
event.clientY
event.clientX
fornisce la coordinata verticale/orizzontale all’interno del viewport dell’applicazione in cui si è verificato l’evento mousemove
event.pageY
event.pageX
fornisce la coordinata verticale/orizzontale all’interno del documento dell’applicazione in cui si è verificato l’evento mousemove
event.relatedTargetMentre 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

Eventi del mouse

Passaggio del mouse su elemento

Negli eventi mouseover e mouseout vi è la possibilità di utilizzare in maniera avanzata le proprietà dell’oggetto event ed in particolare della sua proprietà .target

EventoProprietà
mouseover
mouseout
event.taget.className
element.addEventListener('mouseover', function(event){
event.taget.className = "evidenziaBordo";
});
element.addEventListener('mouseout', function(event){
event.taget.className = "bordoSemplice";
});

Attraverso la proprietà .className abbiamo effettuato un cambio-classe, per un cambio-stile, all’elemento oggetto dell’evento, event.target, in corrispondenza del passaggio del mouse sia in entrata sia in uscita.

Pressione dei pulsanti del mouse

 Nell’evento mousedown possiamo individuare quale pulsante è stato premuto sfruttando la proprietà button dell’oggetto event.

EventoProprietà
mousedownevent.button
event.buttonbutton
element.addEventListener('mousedown', function(event){
console.log(event.button);
});

Il valore restituito è un valore numerico che sta ad indicare il tasto premuto

ValoreDescrizione
0Pulsante sinistro
1Pulsante centrale
2Pulsante destro
element.addEventListener('mousedown', function(event){
switch(event.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;
	}
});

Per la pressione contemporanea di più tasti del mouse utilizzeremo la proprietà event.buttonbutton

element.addEventListener('mousedown', function(event){
console.log(event.buttonbutton);
});
ValoreRapp. binariaDescrizione
1001Pulsante sinistro
2010Pulsante centrale
4100Pulsante destro

Il valore complessivo restituito è la somma dei singoli valori
es.
Pressione contemporanea di tasto destro(4)+sinistro(1) otterremo 5
Pressione contemporanea di tasto sinistro(1)+centrale(2) otterremo 3
ecc.

Posizione del mouse

Possiamo ottenere le posizioni del cursore attraverso proprietà aggintive dell’oggetto event.
Queste proprietà sono disponibili in relazione all’utilizzo dell’evento mousemove

EventoProprietà
mousemoveevent.pageY
event.pageX
event.clientY
event.clientX
element.addEventListener('mousemove', function(event){
console.log('Posizione verticale rispetto al documento: ' + event.pageY + 'px');
console.log('Posizione orizzontale rispetto al documento: ' + event.pageX + 'px');
console.log('Posizione verticale rispetto alla viewport: ' + event.clientY + 'px');
console.log('Posizione orizzontale rispetto alla viewport: ' + event.clientX + 'px');
});

Spostamento da un elemento all’altro

EventoProprietà
mouseover
mouseout
mouseenter
mouseleave
event.target
event.relatedTarget

Un’altra proprietà che riguarda la posizione del mouse e gli eventi mouseovermouseoutmouseenter e mouseleave è event.relatedTarget.
La prorpietà individua l’oggetto da cui proviene o verso cui va il cursore del mouse nel suo spostamento.

Blocco HTML
<div class="conteniner">
<div id="boxRosso" class="box"></div><div id="boxBlue" class="box"></div>
</div>

<style>
.box{height: 100px; width: 100px;}
#box1{background: red;}
#box2{background: blue;}
.conteniner{display:flex;}
</style>
var boxRosso = document.getElementById('boxRosso');
var boxBlue = document.getElementById('boxBlue');
var notifica = document.getElementById('messaggio');

boxRosso.addEventListener('mouseleave', function(event){
console.log('Il mouse si è spostato dal ' + event.target.id + ' al ' + event.relatedTarget.id);
});
boxBlue.addEventListener('mouseleave', function(event){
console.log('Il mouse si è spostato dal ' + event.target.id + ' al ' + event.relatedTarget.id);
});


L’Evento “contextmenu”

L’evento “contextmenu” consente di associare un menu differente rispetto al menu standard disponibile di default quando l’utente clicca con il tasto-destro del mouse sul documento in-genere o su un elemento.

Menu standard click tasto-destro del mouse
Creazione menu alternativo
<div class="menuTastoDestro" style="z-index:10; background:#1180a6; display: flex; justify-content: center; flex-direction: column; padding: 5%; border-radius:5px;">
<h1 style="font-size:30px; color:white;">Ciao, sono Lucio Asciolla e sono un Front-End Web Developer.</h1> 
<p style="font-size:20px; color:white;">Se hai necessità di supporto utilizza i tasti in basso a destra per contattarmi</p>
</div>
window.oncontextmenu = function(event) { 
	var menuAlternativo = document.querySelector("div.menuTastoDestro");
	menuAlternativo.style.position = "absolute";
	menuAlternativo.style.left = event.pageX + "px";
	menuAlternativo.style.top = event.pageY + "px";
	event.preventDefault();
};

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *