Gestione degli eventi con JQuery

Vediamo adesso come funziona  Jquery in caso di eventi, ossia quando si verifica un evento che nel caso del WEB è tipicamente il CLIC su un pulsante o su un altro elemento della pagina, oppure quando si invia un modulo al server o cose del genere. Insomma come dice la parola stessa ogni qual volta che si verifica un evento. La sintassi in questo caso è un po’ la stessa per tutti prendiamo in esempio solamente il submit e le altre sono per esternsione

.sumbit( hadler(eventObject))

.submit([eventData], hadler(eventObject))

.submit([eventData], handlet (eventObject))

Dove

• hadler(eventObject)) rappresenta la funzione che viene generata quando viene generato l’evento
• eventData è il mapping delle informazioni da passare

facciamo alcuni esempi per chiarire meglio

Nel caso volessimo applicare tale funzione a tutti gli elementi form presenti nella pagina dovremmo fare

$(“form”).submit(function(){

//codice

});

E una volta recuperato l’evento nella relativa funzione javascript troveremo

$evento.submit({name:value}, function (e) {

Var nome = e.data.name;

});

Prendiamo ora in esempio il click del mouse per quanto riguarda la propagazione degli eventi. Si prenda in considerazione il seguente codice

<div id =”content”> <div id=”right”> <p>CLICCA QUI</p> </div> </div>

E impostiamo il gestore evento su <p> nel seguente modo

$(‘p’).click(function(){

         // codice eseguito

});

Facciamo adesso una grossa panoramica  sull’oggetto event.

currentTarget  Ritorna elemento DOM corrente nella propagazione dell’evento

data  ci sono le informazioni passate al gestore dell’evento nel momento stesso in cui vi è stato associato

delegateTarget Ritorna l’elemento al quale è collegato il gestore d’evento attuale. Puo’ essere utilizzato per manipolare l’eleelmento che lo ha generato

isDefaultPrevented() Ritorna ture se è stato invocato il metodo preventDefault() su questo oggetto

isProgationStopped() Ritorna true  se è stato invocato il metodo stopPropagtion() su questo oggetto

namespace Ritorna il namespace in fase di invio dell’evento

pageX Ritorna la posizione del mouse secondo la larghezza della pagina

pageY Ritorna la posizione del mouse secondo la lunghezza della pagina

preventDefault() impedisce che venga avviata l’azione di default

result ritorna l’ultimo valore invocato

stopPropagion impedisce la propagazione dell’evento

target  per il target appunto dell’elemento evento insomma il suo contenuto

timestamp prende inizio dal 1 gennaio 1970 fino al momento in cui viene invocato con elementi  in millesecondi.

Vediamo adesso i metodi che mette a disposizione JQUERY  per operare nelle varie caselle di controllo tipicamente input

.blur() viene inviato a un elemento quanto questo perde il focus, swe avete presente il metodo nativo in javascript praticamente ha lo stesso funzionamento

.change() viene inviato a un elemento quaando cambia il suo valore

.focus() viene inviato quando questo elemento guadagna il cocus

.focusin() viene inviato quando  un qualsiasi elemento invocato ottiene il focus quindi o l’elemento stesso o i suoi flgli

.focusout() Il contrario di focusin()

.select() L’evento select viene generato quando l’utente seleziona del testo ed è supportato solo per gli elementi <input type =”text”> e <textarea>

.submit() viene generato quando l’utente cerca di inviare un modulo. Puo’ essere associato solo a elementi di  tipo <form>

Ora invece vi illustriamo i principali metodi in caso di evento da tastiera ossia quando  un tasto viene premuto o rilasciato

.keydown() Collega un gestore all’evento keydown

.keypress()  Collega un gestore all’evento keypress di Javascript

Mentre i piu’ importanti eventi del Mouse sono

.click() collega l’evento click nel mouse

.dclick() come sempre nel caso di doppio click

.mousedown()  viene attivato quando l’utente si posizione con il mouse sopra un elemento e preme il mouse.

.mouseenter() viene inviato quando l’utente sposta il puntatore del mouse in modo che lasci l’eleemento.

.mousemove() viene inviato quando si  posta il puntatore del mouse mentre questo è posizionato all’interno dell’elelemento

.mouseout() viene inviato quando l’utente sposta il puntatore del mouse al di fuori dell’eleemento

.mouseover() viene inviato quando l’utente sposa il puntatore del mouse al di fuori dell’elemento

.mouseup() viene inviato quando l’utente rilascia il tasto del mouse.

Vediamo adesso l’evento Hover che si verifica quando il puntatore del mouse viene posto su un elemento e ha la seguente sintassi

.hover( handlerIn(eventObject), handlerOur(eventObject) )

Dove

• handlerIn viene richiamato quando il puntatatore del mouse viene posizionato sopra l’elemento
• hadlerOut richiamato quando il puntatore del mouse si trova fuori dell’elemento.

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

.hover( handlerInOut(eventObject))

Vediamo ora come  e quali sono I metodi sul document

.load() viene inviato quando l’eelemento e i suoi elementi figli sono stati completamente caricabili

.ready()  viene invocato quando la struttura e i DOM sono completamente caricati nella pagina web.

.unload() collega un gestore all’evento unload

Facciamo adesso un paio di esempi per meglio potere comprendere questa tecnologia

   $("a").bind("click",function  (event) {
   alert($(this).attr("href"));
 });

In questa maniera si associa all’elemento a l’attributo href e lo facciamo tramite  la funzione bind. E se volessimo sapere realmente quale elemento abbiamo cliccato dovremmo fare

$("a").bind("click",function  (event) {
   var  target = event.target;
   alert(target.tagName);  //il nome del tag su cui abbiamo cliccato
   });

vediamo adesso un esempio con la funzione event e .type

function Evento (event) {
   if (event.type == "click")  {
   alert  ("Click!");
   } else {
   alert  ("Un altro evento");
   }
   }

   $("a").bind("click focus blur",function (event) {
   lanciaEvento(event);
   });

in questa maniera possiamo intercettare l’evento click ossia pressione del mouse del tasto sinistro.

E una possibile implentazione di prevenDefault è la seguente

$("a").bind("click",function  (event) {
   event.preventDefault();  //blocca l'evento di default
   //  codice da eseguire
   });

Ossia blocca l’evento associato di default e ne esegue un altro. Vediamo adesso un esempio piu’ concreto , ossia vediamo come sia semplice cambiare il background di una casella a cui abbiato dato il focus e conseguentemente lo abbiamo tolto all’adiacente.

Dove reset.css è

/**
   * CSS Reset  Reloaded
   *
   * @author  Eric Meyer
   * @visit    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   */
   html, body, div,  span, applet, object, iframe,
   h1, h2, h3, h4,  h5, h6, p, blockquote, pre,
   a, abbr, acronym,  address, big, cite, code,
   del, dfn, em,  font, img, ins, kbd, q, s, samp,
   small, strike,  strong, sub, sup, tt, var,
   dl, dt, dd, ol, ul, li,
   fieldset, form,  label, legend,
   table, caption,  tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-weight: inherit;
   font-style: inherit;
   font-size: 100%;
   font-family: inherit;
   vertical-align: baseline;
   }
   /* remember to  define focus styles! */
   :focus {
   outline: 0;
   }
   body {
   line-height: 1;
   color: #000;
   background-color: #FFF;
   }
   ol, ul {
   list-style: none;
   }
   /* tables still  need 'cellspacing="0"' in the markup */
   table {
   border-collapse: separate;
   border-spacing: 0;
   }
   caption, th, td {
   text-align: left;
   font-weight: normal;
   }
   blockquote:before,  blockquote:after,
   q:before, q:after  {
   content: "";
   }
   blockquote, q {
   quotes:  "" "";
   }
   a img {
   border:none;
   }

E base css è

/**
   * %%Specific Body Style 
   */
   body,html {
   }
   body {
   font: 12px  Verdana, Arial, Helvetica, sans-serif;
   margin:40px;
   }

/**
   * %%Layout
   */

#container {
   width:  60% ;
   }

/**
   * %%Typography
   */

table {
   font-size:  1em;
   }

/* standards redesign */
   h1 {
   font-size:26px;
   font-weight:bold;
   }
   h2 {
   font-size:20px;
   }
   h3 {
   font-size:16px
   }
   p {
   line-height:150%;
   }
   strong {
   font-weight:bold;
   }
   del {
   text-decoration:  line-through;
   color:  #666;
   }
   cite, em, dfn  {
   font-style:italic;
   }
   ins, dfn {
   border-bottom:  1px solid #ccc;
   }
   sup {
   vertical-align:  super;
   }
   sub {
   vertical-align:  sub;
   }
   a abbr, a acronym {
   border:  none;
   }
   abbr, acronym {
   text-transform:  uppercase;
   font-size:  85%;
   letter-spacing:  .1em;
   }
   abbr[title], acronym[title], dfn[title] {
   cursor:  help;
   border-bottom:  1px dotted #ccc;
   }
   code, kbd, samp, pre, tt, var {
   font-size:  92%;
   font-family:  monaco, "Lucida Console", courier, monospace;
   }

/* dimensions */
   small, .small, sup, sub {
   font-size:80%;
   }
   .big {
   font-size:145%;
   }
   .thin {
   font-weight:  lighter;
   }

/* colors */
   .red {
   color:#F00;
   }
   .orange {
   color:#F60;
   }
   .blue {
   color:#03F;
   }
   .green {
   color:#0C0;
   }

/* various styles */
   .underline {
   text-decoration:underline;
   }

.debug {
   outline:1px  solid #F00;
   }

.highlight {
   background-color:#FF6;  /* bright yellow */
   padding:0px  2px;
   }
   .quiet {
   color:#666;
   }
   .loud {
   color:#000;
   }

/* on demand structure */
   fieldset {
   border:1px  solid #ccc;
   width:95%;
   padding:7px;
   margin-top:  10px;
   margin-bottom:  10px;
   }

fieldset legend {
   padding:0  3px;
   font-weight:bold;
   }
   form input[type='text'], form select, form textarea {
   border:1px  solid #ccc;
   }

pre {
   background:  #EEE;
   padding:  5px;
   border:  1px solid #CCCCCC;
   }

Vi consigliamo di provarlo, come potete vedere non è nulla di particolarmente difficile. Invece se volessimo rimuovere queste associazioni che nella definizione abbiamo chiamato handler dobbiamo fare semplicemente il seguente

$(":text").unbind();  // rimuovi tutti gli eventi dai campi di testo
   $(":text").unbind("blur focus"); //rimuovi gli handlers per  gli eventi focus e blur
   $(":text").unbind("blur",blurFunction); // rimuovi uno  specifico handler per l'evento blur

E ora vediamo un esempio con hover, toggle, che vi abbiamo spiegato prima, questo esempio non farà altro che provare se il mouse è dentro o meno una casella oppure se all’interno è stato digitato due volte il click.

E con questo esempio abbiamo concluso gli eventi con Jquery dal prossimo capitolo affronteremo  il capitolo dei DOM.