Comment créer des événements personnalisés en direct dans jQuery

Question

jQuery a un classeur d'événements très pratique appelé live () qui ajoutera des événements aux éléments du DOM à la volée (même pour les éléments qui seront ajoutés plus tard au DOM). Le problème est que cela ne fonctionne que sur des événements spécifiques ( répertoriés ici dans la documentation ).

Je souhaite vraiment que les événements en direct soient ciblés, flous et changent, ce qui n’est pas pris en charge par les événements en direct pour le moment. En outre, si je peux créer des événements personnalisés en direct, cela changera beaucoup le jeu de mon application. La plupart du code que j'ai actuellement est dédié à la ré-association d'anciens événements (modification, focus et événements personnalisés pour rendre les éléments déplaçables ou redimensionnables) en nouveaux éléments dom ajoutés avec ajax.

Une idée? Je suppose que la délégation d'événements est la voie à suivre, mais pour le moment, le code sera plus compliqué. Peut-être un plugin qui gère les délégations d'événements ... pas sûr. Aidez-moi à trouver une solution.

Answer 1

Cette fonctionnalité est maintenant disponible dans jQuery 1.4. live () prend désormais en charge tous les événements JavaScript (y compris les événements personnalisés), et les événements focusin et focusout ont été introduits en tant que versions bouillonnantes de focus et flou .

De la documentation jQuery 1.4 sur .live () :

  

Depuis jQuery 1.4, la méthode .live () prend en charge les événements personnalisés ainsi que tous les événements JavaScript. Deux exceptions: puisque le focus et le flou ne sont pas des événements propices à la propagation, nous devons utiliser focusin et focusout à la place.

Answer 2

Si ce n'est pas dans jQuery, il y a probablement une raison. Bogues du navigateur, etc., qui le rendent peu fiable. J'attendrais jusqu'à ce qu'ils l'implémentent ou essaient d'utiliser le plug-in d'origine devenu live http: //docs.jquery. com / Plugins / livequery

Modifier:

C'est gentil, les gars. Il y a une raison pour laquelle ce n'est pas dans jQuery et je doute fortement que ce soit parce qu'ils sont paresseux . En fait, j'ai passé du temps à lire la source et à chercher pourquoi seuls certains événements sont implémentés dans live () et je ne trouve pas pourquoi. Donc, si quelqu'un sait ... s'il vous plaît nous éclairer.

Answer 3

La méthode

de live () de jQuery ne fonctionnera pas car les événements de focus et de flou ne se propagent pas (en bulle) comme les autres événements DOM. L’équipe de jQuery introduira éventuellement cette fonctionnalité, mais elle devra être artificielle (barbotage manuel).

Si je n'utilisais pas jQuery et souhaitais toujours bénéficier des avantages de live () , j'utiliserais la capture d'événements dans les navigateurs qui le supportaient (la plupart des navigateurs non-IE). et dans IE, j'utiliserais leurs événements onFocusIn / onFocusOut (ces événements, contrairement à focus / blur, font des bulles ).

Voici un exemple:

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;
}

Utilisation:

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

Une abstraction similaire pourrait être utilisée pour les événements de flou et de changement.

Pour en savoir plus sur l'ordre des événements (capture / diffusion), cliquez ici: http: // www.quirksmode.org/js/events_order.html

Il convient également de noter que liveQuery, le plug-in jQuery, fonctionne car il lie à nouveau l'événement à de nouveaux éléments. cela ne fonctionne qu'avec les méthodes de manipulation DOM de jQuery telles que 'append', 'insertBefore' etc. Donc, si vous deviez ajouter un nouvel élément sans utiliser jQuery, cela ne fonctionnerait pas.

Answer 4

Vous pouvez consulter le plug-in jQuery.Listen d’Ariel Flesley. Il est similaire aux événements live () et au plugin livequery (), mais il supporte les événements focus () et blur ().

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

Answer 5

J'ai utilisé avec succès le plugin livequery en complément de la fonction .live () dans jQuery. Non seulement il peut lier des événements tels que focus, flou et changement (que live () ne supporte pas encore, à partir de la version 1.3.2), mais il vous fournit également un mécanisme pour lier des événements personnalisés à des éléments DOM à la volée. Par exemple, je l'ai utilisé pour lier les éléments déplaçables et rédigés à certains éléments DOM qui seront ajoutés via Ajax. Cela rend mon code beaucoup plus simple à lire et à gérer.