A questo gruppo si possono ricondurre i seguenti eventi:
- onClick: attivato quando si clicca su un oggetto;
- onDblClick: attivato con un doppio click;
- onMouseDown: attivato quando si schiaccia il tasto sinistro del mouse;
- onMouseUp: attivato quando si alza il tasto sinistro del mouse precedentemente schiacciato;
- onContextMenu: attivato quando si clicca il tasto destro del mouse aprendo il ContextMenu.
Gli eventi onMouseDown e onMouseUp sono attivati dai due movimenti del tasto sinistro del mouse, il primo quando si preme giù il tasto e il secondo quando si solleva dopo il click.
Il doppio click è un evento che ingloba gli altri e, per la precisione, attiva in successione onmousedown, onmouseup, onclick.
Versioni e compatibilità
L'utilizzo di questi eventi è limitato da diversi fattori. Innanzitutto occorre considerare la versione di Javascript a cui fanno parte e, per conseguenza, non sono validi per tutti i browser. Ecco il quadro riepilogativo (il colore diverso dell'asterisco indica le modifiche rispetto alla versione precedente, NN sta per Netscape e IE per Internet Explorer):
| Evento |
Versione Javascript |
NN2.0 | NN3.0 | NN4.0 | NN4.06 | IE3.0 | IE4.0 | IE5.0 |
| onClick | 1.0 | * | * | * | * | * | * | * |
| onDblClick | 1.2 | * | * | * | * | |||
| onMouseDown | 1.2 | * | * | * | * | |||
| onMouseUp | 1.2 | * | * | * | * | |||
| onContextMenu | DHTML | * |
Attenzione: l'evento onDblClick non funziona su Mac.
Valore true e false
L'evento onClick con JavaScript 1.1 ha aggiunto la possibilità di ricevere un valore true e false tramite il quale può essere attivato o meno. Tale possibilità è valida anche per gli eventi onMouseDown e onMouseUp e per onContextMenu.
Esempio: cliccate qui, se rispondete OK il link si attiva se rispondete Annulla il link non si attiva... ecco il codice:
<A HREF="link.htm" onclick="return(confirm('Sei sicuro'))">
Il vantaggio è che l'evento onClick si attiva prima del tag associato per cui se è un link, questo è caricato dopo il completamento dell'istruzione associata. In tal modo questa caratteristica si può applicare per i radio o i checkbox per non selezionarli, e per i buttoni, compresi quelli Submit e Reset, per considerarli non premuti, tranne che per un piccolo bug che rende non funionzbile l'opzione per il Reset su alcune piattaforme.
Interessante l'evento onContextMenu, anche perché spesso si chiede di disabilitare il tasto destro del mouse, ma funziona solo con Internet Explorer 5.0.
Tag sensibili
Altro limite è dato, per Netscape e per le vecchie versioni di Explorer, dai tag a cui l'evento può essere associato:
| Evento | Tag associati in Netscape e JScript | |||||||
| onClick | Questo gestore è usato con i pulsanti di invio (submit), pulsanti di reset (reset), caselle di controllo (checkbox e radio), bottoni, tag <INPUT> di tipo OPTION e tag <A>. | |||||||
| onDblClick | Usato con i tag <BODY> e <A> | |||||||
| onMouseDown | Usato con i bottoni e i tag <BODY> e <A> | |||||||
| onMouseUp | Usato con i bottoni e i tag <BODY> e <A> | |||||||
| onContextMenu | Nessuno perché funziona solo in Explorer 5.0 | |||||||
Molto più numerosi i tag associati in Explorer 4.0 e successivo a tutti i tipi di eventi:
A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |