JavaScript: gli eventi del mouse

L'interazione fra la il documento visualizzato dal browser e l'utente può avvenire attraverso il mouse e/o la tastiera. Possiamo sintetizzare gli eventi generati dal mouse distinguendoli da: eventi orientati ai clic del mouse e eventi orientati al movimento del mouse. Nella lista che segue sintetizziamo quelli generati dai clic del mouse:

• onclick: cattura l'evento generato dal clic del mouse, può essere applicato a bottoni (di invio e reset), a collegamenti, a pulsanti radio e caselle di selezione;
• ondbclick: cattura l'evento generato dal doppio clic del mouse, può essere applicato al corpo della pagina e ad altri elementi;
• onmousedown: cattura l'evento generato dalla pressione, fissa, del tasto del mouse, può essere applicato al corpo della pagina e ad altri elementi;
• onmouseup: cattura l'evento generato dal rilascio del tasto del mouse premuto, può essere applicato al corpo della pagina e ad altri elementi;
• oncontextmenu: gli eventi fin qui visti erano tutti legati alla pressione del tasto sinistro del mouse. Questo evento cattura, invece, l'evento generato dal clic del tasto destro;

Ognuno di questi eventi può essere associato all'esecuzione di una funzione o comando JavaScript. Purtroppo non tutti i browser, a causa dell'aderenza con il modello a oggetti implementato e il DOM specificato dal W3C, riconoscono gli eventi detti sopra. Di seguito sintetizziamo, invece, gli eventi orientati al movimento del mouse:

• onmouseover: genera l'evento quando il mouse è sopra un oggetto della pagina, può essere applicato ai pulsanti (di invio e reset), ai collegamenti, ai pulsanti radio, e alle caselle di selezione;
• onmouseout: genera l'evento quando il mouse si è allontanato dall'elemento. Questo evento, quindi, segue l'evento onmouseover detto prima;
• onmousemove: genera l'evento al movimento del mouse, può essere applicato al corpo della pagina;

La sintassi concessa a un evento per la chiamata di una funzione JavaScript è la seguente: evento="funzione()", (oppure evento="comando_javascript" per i comandi) da inserire nel tag dell'elemento! In questa pagina trovate un semplice esempio: "Grand Prix del mouse!" (il mio miglior tempo, al momento è di 5.28 secondi!). Come sempre vi invito a dare uno sguardo al codice JavaScript.