Come creare eventi personalizzati dal vivo in jQuery

Question

jQuery ha un raccoglitore di eventi molto utile chiamato live() che aggiungerà gli eventi agli elementi DOM al volo (anche per gli elementi che verranno aggiunti in seguito al DOM). Il problema è che funziona solo su eventi specifici (listed here in documentation).

Voglio davvero avere eventi dal vivo per messa a fuoco, sfocatura e cambiamento che non è supportato da live in questo momento. Inoltre, se posso creare eventi live dal vivo, sarà un grande cambiamento per la mia app. La maggior parte del codice che ho in questo momento è dedicato alla riconnessione di vecchi eventi (modifiche, focus e eventi personalizzati per rendere gli oggetti trascinabili o ridimensionabili) a nuovi elementi dom aggiunti tramite ajax.

Qualche idea? Immagino che la delega degli eventi sia la strada da percorrere, ma al momento renderò il codice più complicato. Forse un plugin che gestisce le deleghe degli eventi ... non è sicuro. Aiutami a trovare una soluzione.

Answer 1

Questa funzionalità è ora disponibile in jQuery 1.4. live() ora supporta tutti gli eventi JavaScript (inclusi eventi personalizzati), e le focusin e focusout eventi sono stati introdotti come le versioni di bubbling del focus e blur.

Dal jQuery 1.4 documentation on .live():

Come di jQuery 1.4, il metodo .Live() supporta eventi personalizzati così come tutti gli eventi JavaScript. Due eccezioni: dal momento che la messa a fuoco e la sfocatura non sono in realtà eventi di bubbling, è necessario utilizzare invece focusin e focusout.

Answer 2

Se non è in jQuery, è molto probabile che vi sia un motivo. Bug del browser ecc. Che lo rendono inaffidabile. Vorrei aspettare fino a che non implementano o provare a utilizzare il plugin originale che è diventato vivo http://docs.jquery.com/Plugins/livequery

Modifica:

bravi ragazzi downvote. C'è un motivo per cui non è in jQuery e dubito fortemente che sia perché sono pigro. In realtà ho passato del tempo a leggere la fonte e a cercare perché solo alcuni eventi sono implementati in live() e non riesco a trovare il perché. Quindi se qualcuno lo sa ... per favore illuminaci.

Answer 3

Ho usato con successo il plugin livequery come complemento della funzione .live() in jQuery. Non solo è possibile associare eventi come messa a fuoco, sfocatura e modifica (che live() non supporta ancora, come da 1.3.2) ma fornisce anche un meccanismo per associare al volo gli eventi personalizzati agli elementi DOM. Ad esempio, l'ho usato per legare draggable e droppable ad alcuni elementi DOM che verranno aggiunti tramite Ajax. Rende il mio codice molto più semplice da leggere e più facile da mantenere.

Answer 4

jQuery's live() metodo non funzionerà perché gli eventi di messa a fuoco e sfocatura non si propagano (bolle) come altri eventi DOM. Il team di jQuery introdurrà questa funzionalità, ma dovrà essere artificiale (bubbling manuale).

Se non stavo usando jQuery e ancora voglia i benefici di live() userei evento cattura nei browser che lo sostenevano (la maggior parte dei browser diversi da IE) ed in IE userei loro onFocusIn/onFocusOut eventi (questi eventi, a differenza di messa a fuoco/sfocatura, fanno bolle).

Ecco un esempio:

function onFocus(el, fn) { 
    var outerFn = function(e) { 
     e = e || window.event; 
     if ((e.target || e.srcElement) === el) { 
      fn.call(el); 
     } 
    }; 
    if (document.body.addEventListener) { 
     // This is event capturing: 
     document.body.addEventListener('focus', outerFn, true); 
    } else { 
     // This is event delegation: 
     document.body.attachEvent('onfocusin', outerFn); 
    } 
    return outerFn; 
} 

Usandolo:

onFocus(document.getElementById('myInputField'), function(){ 
    log('FOCUSED!!!'); 
}); 

Un'astrazione simile potrebbe essere utilizzato per la sfocatura e cambiare gli eventi.

Per saperne di più fine evento (cattura/bolle) qui: http://www.quirksmode.org/js/events_order.html

---

Potrebbe anche essere la pena notare che livequery, il plugin jQuery, funziona perché ri-lega l'evento per nuovi elementi ; funziona solo con i metodi di manipolazione DOM di jQuery come 'append', 'insertBefore' ecc. Quindi, se dovessi aggiungere un nuovo elemento senza usare jQuery, non funzionerebbe.

Answer 5

Si consiglia di controllare plug jQuery.Listen di Ariel Flesley. È simile agli eventi live() e al plugin livequery(), ma supporta gli eventi focus() e blur().

http://flesler.blogspot.com/2007/10/jquerylisten.html