Simone D'Amico Blog - Web Design Tutorials – jQuery, CSS, PHP, Wordpress

Novità jQuery 1.4 #3: i nuovi eventi

This entry was posted on February 10th, 2010 and is filed under jQuery.

Tra le caratteristiche della nuova versione di jQuery sicuramente spiccano quelle inerenti all’handling di nuovi eventi.

Con la versione 1.4 infatti sono stati aggiunti nuovi eventi quali:

• live()
• focusin()
• focusout()
• bind() eventi multipli

Vediamoli ora nel dettaglio incominciando dal metodo bind() dato che sicuramente molti leggendolo nell’elenco avranno pensato che non è un nuovo evento.

Bind eventi multipli

In genere gli eventi in jQuery vengono richiamati nella maniera

$('element').event( do something );

Il metodo bind è una sorta di “raccoglitore” di eventi; cioè il funzionamento è identico alla precedente chiamata solo che l’evento viene passato come primo parametro al metodo. Una semplice chiamata al metodo bind quindi è la seguente:

//bind
$('p').bind( 'click', function() {
     alert('Hello world');
});

//che equivale
$('p').click( function() {
     alert('Hello world');
});

La miglioria apportata nella versione 1.4 consiste nell’includere eventi multipli all’interno di un’unica chiamata al metodo. Vediamo con un esempio cosa c’è di nuovo:

//jQuery < 1.4
$('input').bind( 'focus', function() { alert('focus'); });
$('input').bind( 'blur', function() { alert('blur'); });

//jQuery >= 1.4
$('input').bind({
  focus: function() {
    alert('focus');
  },
  blur: function() {
    alert('blur');
  }
});

Soluzione sicuramente molto più veloce e semplice da implementare.

Live

Il metodo live() è una variante del metodo bind(). La differenza sostanziale che c’è tra i due metodi è che bind() funziona solo con oggetti che sono presenti nel DOM prima della sua chiamata mentre il metodo live() funziona anche con oggetti creati successivamente. Per capire la differenza, vediamo i seguenti esempi di codice:

//bind
$("p").bind("click", function(){
 $(this).after("<p>Another paragraph!</p>");
});

//live
$("p").live("click", function(){
 $(this).after("<p>Another paragraph!</p>");
});

Come vedete entrambi i frammenti di codice aggiungono un paragrafo alla pagina. Con il metodo bind però, cliccando sui nuovi elementi inseriti non succede nulla; con il metodo live invece vedete che continua a funzionare l’evento click anche sui nuovi elementi. Una demo delle differenze è disponibile al seguente link.

FocusIn – FocusOut

Questi due metodi vanno a sostituire i vecchi metodi focus() e blur() già utilizzatissimi nelle form.

Il loro utilizzo è identico a quello dei loro “antenati”. Vediamone un esempio:

$('form').focusin( function() { alert('focusIn'); } )
         .focusout( function() { alert('focusOut'); } );

Like this post? Share It! :)

Navigation:

Related Posts:

Comments

---