Benvenuti da Idea R | Vicenza - Romano di Lombardia (Bergamo)

Blog

Prendere uno smanettone del software degli anni 80, aggiungere un graphic designer di nuova generazione e allungare il tutto con uno studioso di strategie di marketing. Agitare energicamente e si ottiene il blog Idea R.

jQuery: come lanciare e gestire gli eventi personalizzati

Pubblicato il 11/22/2012
Categorie: Siti Web
jQuery: come lanciare e gestire gli eventi personalizzati

Avevamo già visto in un articolo precedente come gestire gli eventi JavaScript.
jQuery semplifica ma soprattutto uniforma il motore di eventi di JavaScript con 2 semplici metodi: bind() per sottoscriversi ad un evento e trigger() per lanciarlo.

Gli eventi non sono però solo una prerogativa degli oggetti standard DOM (Document Object Model), anche i vostri oggetti possono lanciare eventi, persino se non hanno nulla a che fare con il DOM.
In linea generale con jQuery ci si sottoscrive agli eventi usando le seguente forma

$(mySelector).bind('click', function(event){...});

o la forma più contratta

$(mySelector).click(function(event){...});

Come anticipato ci si può sottoscrivere anche ad eventi personalizzati, con

$(mySelector).bind('mycustomevent', function(event){...});

che a loro volta verranno lanciati dall'oggetto personalizzato con

$(mySelector).trigger('mycustomevent');

Domanda: se volessi passare delle informazioni all'event handler al momento del binding?
Risposta: si può passare qualsiasi informazione specificandola nell'istruzione bind che poi l'event handler recupererà dalla proprietà data dell'oggetto event.

// Use myCustomData to hold bind-time data
$(mySelector).bind('mycustomevent', myCustomData, function(event)
{
    ...

    // event.data contains myCustomData
    var myData = event.data;

    ...
});

Altra domanda: e se volessi passare delle informazioni all'event handler al momento del lancio dell'evento?
Risposta: si definisce semplicemente un parametro aggiuntivo nell'event handler.

// Use myParam to hold trigger-time data
$(mySelector).bind('mycustomevent', function(event, myParam){...});
...
$(mySelector).trigger('mycustomevent', 'this is the trigger-time parameter');

Sei il lettore numero 12,041.

Commenti

Articolo precedente

Articolo precedente

Il mondo dei social media 2013

Articolo successivo

3 methods to detect mobile devices in ASP.NET

Articolo successivo