Événement personnalisé dans jQuery qui n'est pas lié à un élément DOM?

Question

Je suis curieux de savoir s'il est possible de créer un événement personnalisé dans jQuery qui n'est pas lié à un élément DOM. Je préfère grandement jQuery à YUI mais il y a une chose que j'aime dans YUI, qui est de créer des événements personnalisés et de pouvoir y adhérer plus tard.

Par exemple, cela crée un événement qui est lié à une variable, et non à un élément DOM:

var myevent = new YAHOO.util.CustomEvent("mycustomevent"); 

Tous les exemples et la documentation que je l'ai lu pour jQuery exigent quelque chose comme:

$('body').bind('mycustomevent', function(){ 
    //do stuff 
}); 

Answer 1

Vous pouvez déclencher des événements mondiaux personnalisés comme celui-ci dans jQuery:

jQuery.event.trigger('mycustomevent', [arg1, arg2, arg3]); 

Ceux-ci se déclencheront pour n'importe quel élément.

Puisque jQuery est construit autour d'objets DOM, vous devez lier vos événements aux objets DOM. Vous pouvez probablement trouver un moyen de lier des événements sans un élément (vous l'avez fait), mais ce n'est pas une méthodologie supportée.

Comme vous l'avez écrit dans votre réponse, vous pouvez lier votre événement à un objet DOM global si vous ne voulez pas le lier à un élément de page individuelle:

$(document).bind('mycustomevent', function (e, arg1, arg2, arg3) { /* ... */ }); 

Answer 2

Pour les futurs lecteurs, son assez simple à faire cela. J'ai fait d'autres recherches après avoir posté ma question. Malheureusement, aucun des autres commentateurs n'avaient raison.

Pour lier un événement personnalisé:

$().bind('mycustomevent', function(){ 
    //code here 
}); 

En outre, vous pouvez construire des données dans l'objet de l'événement qui est plus tard accessible:

$({mydata:'testdata'}).bind('mycustomevent',function(){ 
    //code here 
}); 

Answer 3

Vous pouvez déclencher encore arbitraire et réagir aux événements en utilisant jQuery, même si vous ne savez pas à quel élément les attacher. Créez simplement un élément "récepteur" dans votre document, auquel vous pouvez lier tous vos événements personnalisés. Cela vous permet de gérer la logique de gestion des événements en un seul endroit, pour tous vos événements non spécifiques aux éléments.

$(document).ready(function() { 

    $(body).append('<div id="receiver">'); 

    $("#receiver").bind("foo_event", function() { 
    // decide what to do now that foo_event has been triggered. 
    }); 

    $("#some_element").click(function() { 
    $("#receiver").trigger("foo_event"); 
    }); 

}); 

Answer 4

La liaison aux éléments non dom a été supprimée dans jQuery 1.4.4.

Answer 5

jQuery Callbacks fournit un moyen simple d'implémenter un système pub-sub indépendant du DOM.

Près du bas de la page liée est un exemple de code qui montre comment faire cela.

Answer 6

[EDIT]

est ici une classe ouvrière qui utilise les concepts écrits ci-dessous:

https://github.com/stratboy/image-preloader

Il est juste un préchargement d'image séquentielle. Vous pouvez vous abonner à un tas d'événements. Regarde.

[/ EDIT]

post ancienne:

Voici un autre exemple barebone avec callbacks comme suggéré par Himanshu P.

Je construis une classe et je viens de Mootools, où les choses comme Les classes et les événements personnalisés directement implémentés dans les classes (donc non liés aux éléments DOM) sont absolument naturels. J'ai donc essayé une sorte de solution de contournement et partage ci-dessous.

var step_slider; 

    //sandbox 
    ;(function($) { 

//constructor 
var StepSlider = function(slider_mask_selector,options) { 

    //this.onStep = $.Event('step'); 
    this.options = null; 
    this.onstep = $.Callbacks(); 

    this.init(); 
}//end constructor 

StepSlider.prototype = { 

    init:function(){ 
     this.set_events(); 
    },//end init 

    set_events:function(){ 

     if(this.options){ 
      if(this.options.onstep){ 
       this.subscribe('step',options.onstep); 
      } 
     } 

    },//set_events 

    subscribe:function(event,action){ 
     this['on'+event].add(action); 
    }, 

    fire_onstep:function(){ 
     this.onstep.fire({ data1:'ok' }); 
    } 

}//end prototype/class 

//-------------------- 

$(document).ready(function() { 

    step_slider = new StepSlider('selector'); 

    //for example, say that you have a div#next-button, you can then do this: 
    $('#next-button').click(function(){ 
     step_slider.fire_onstep(); 
    }); 

});//end domready 


})(jQuery); 

Answer 7

Selon a comment by John Resig, événements de liaison à des objets personnalisés via jQuery est pris en charge:

Aucune raison particulière pour laquelle il n'est pas documenté (autre que c'est plutôt non traditionnel pour la plupart des utilisateurs) - mais oui, nous le soutenons et avons des tests unitaires pour cela.

ceci marche:

var a = {foo: 'bar'}; 
$(a).on('baz', function() {console.log('hello')}); 
$(a).triggerHandler('baz'); 
>>> 'hello' 

La plupart des utilisateurs auront besoin triggerHandler(), pas trigger(). Si .trigger("eventName") est utilisé, il recherchera une propriété "eventName" sur l'objet et tentera de l'exécuter après l'exécution des gestionnaires jQuery attachés (Source).

EDIT (28/02/2017):

Après avoir utilisé ce modèle pendant environ 2 ans dans une grande base de code, je peux attester que c'est une mauvaise idée. Ces événements personnalisés conduisent à des flux de données incompréhensibles. Préférer les rappels à la place.