Événements personnalisés dans jQuery ?

Question

Je suis à la recherche de quelques suggestions sur la façon de mettre en œuvre personnalisée eventhandling jquery dans la meilleure façon. Je sais comment raccorder les événements à partir des éléments du dom comme "clic", etc, mais je suis en train de construire une petite bibliothèque javascript/plugin pour gérer une fonctionnalité d'aperçu.

J'ai un script en cours d'exécution pour la mise à jour du texte dans un élément du dom à partir d'un ensemble de règles et de données/de l'utilisateur que j'ai eu, mais maintenant j'ai besoin de ce même texte dans d'autres éléments que ce script ne peux pas le savoir. Ce dont j'ai besoin est un bon modèle en quelque sorte à observer ce script produire le besoin de texte.

Alors, comment dois-je faire? Ai-je oublier certains builtin fonctionnalités de jquery pour augmenter/gérer les événements de l'utilisateur ou de faire j'ai besoin d'un plugin jquery pour faire ça? Que pensez-vous est la meilleure façon/plugin pour gérer cela?

Answer 1

Le lien fourni dans la réponse acceptée montre une belle façon de mettre en œuvre le système de publication/abonnement à l’aide de jQuery, mais j’ai trouvé le code un peu difficile à lire, alors voici ma version simplifiée du code :

http://jsfiddle.net/tFw89/5/

Answer 2

Jetez un oeil à ceci:

_{(réimprimé à partir de l'expiration de page de blog http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/ basé sur la version archivée à http://web.archive.org/web/20130120010146/http://jamiethompson.co.uk/web/2008/06/17/publish-subscribe-with-jquery/)}

---

Publier / Souscrire Avec jQuery

Le 17 juin, 2008

Avec une vue de la rédaction d'un jQuery UI intégré avec des fonctionnalités hors connexion de Google Gears, j'ai joué avec un peu de code pour sondage pour l'état de la connexion réseau à l'aide de jQuery.

Le Réseau De Détection D'Objet

Le principe de base est très simple. Nous créons une instance d'un réseau de détection de l'objet qui interroge une URL à intervalles réguliers. Si ces requêtes HTTP échec, on peut supposer que la connectivité réseau a été perdue, ou le serveur est tout simplement inaccessible à l'heure actuelle.

$.networkDetection = function(url,interval){
    var url = url;
    var interval = interval;
    online = false;
    this.StartPolling = function(){
        this.StopPolling();
        this.timer = setInterval(poll, interval);
    };
    this.StopPolling = function(){
        clearInterval(this.timer);
    };
    this.setPollInterval= function(i) {
        interval = i;
    };
    this.getOnlineStatus = function(){
        return online;
    };
    function poll() {
        $.ajax({
            type: "POST",
            url: url,
            dataType: "text",
            error: function(){
                online = false;
                $(document).trigger('status.networkDetection',[false]);
            },
            success: function(){
                online = true;
                $(document).trigger('status.networkDetection',[true]);
            }
        });
    };
};

Vous pouvez voir la démo ici. Configurer votre navigateur pour travailler hors connexion et de voir ce qui se passe.... non, il n'est pas très passionnant.

Déclencheur et Lier

Ce qui est excitant, même si (ou au moins ce qui est excitant moi) est la méthode par laquelle l'état devient relayé par l'application. J'ai trébuché sur une grande partie de l'onu-a discuté de la méthode de la mise en œuvre d'un pub/sous-système à l'aide de jQuery de déclenchement et de lier des méthodes.

Le code de démonstration est plus obtus qu'il faut. Le réseau de détection d'objet publie "statut" des événements pour le document qui écoute activement pour eux, et à son tour, publie notifier des événements pour tous les abonnés (plus sur ceux qui plus tard). Le raisonnement derrière cela est que, dans une application réelle, il y aurait probablement plus logique de contrôler quand et comment le notifier les événements sont publiés.

$(document).bind("status.networkDetection", function(e, status){
    // subscribers can be namespaced with multiple classes
    subscribers = $('.subscriber.networkDetection');
    // publish notify.networkDetection even to subscribers
    subscribers.trigger("notify.networkDetection", [status])
    /*
    other logic based on network connectivity could go here
    use google gears offline storage etc
    maybe trigger some other events
    */
});

En raison de jQuery DOM approche centrée sur les événements sont publiés à (déclenché) des éléments du DOM. Cela peut être la fenêtre de document ou de l'objet pour les événements généraux ou vous pouvez générer un objet jQuery à l'aide d'un sélecteur. L'approche que j'ai pris avec la démo est de créer une presque des espaces à la définition d'abonnés.

Des éléments du DOM qui sont abonnés sont classés simplement par un "abonné" et "networkDetection". On peut alors publier uniquement sur les événements de ces éléments (dont il est seul dans la démo) par le déclenchement d'un événement de notification sur $(".subscriber.networkDetection")

L' #notifier div qui fait partie de l' .subscriber.networkDetection groupe d'abonnés a alors une fonction anonyme lié à elle, et agissent comme un auditeur.

$('#notifier').bind("notify.networkDetection",function(e, online){
    // the following simply demonstrates
    notifier = $(this);
    if(online){
        if (!notifier.hasClass("online")){
            $(this)
                .addClass("online")
                .removeClass("offline")
                .text("ONLINE");
        }
    }else{
        if (!notifier.hasClass("offline")){
            $(this)
                .addClass("offline")
                .removeClass("online")
                .text("OFFLINE");
        }
    };
});

Donc, là vous allez. C'est assez verbeux et mon exemple n'est pas du tout excitant. Il n'a pas également la vitrine de quelque chose d'intéressant que vous pourriez faire avec ces méthodes, mais si quelqu'un est intéressé à creuser par le biais de la source de se sentir libre. Tout le code est en ligne dans l'en-tête de la page de démonstration

Answer 3

Je pense.. Il est possible de « lier » des événements personnalisés, comme (de : http://docs.jquery.com/Events/bind#typedatafn) :

Answer 4

J'ai eu une question similaire, mais qui était en fait la recherche d'une réponse différente; je suis à la recherche pour créer un événement personnalisé. Par exemple, au lieu de toujours dire ce:

$('#myInput').keydown(function(ev) {
    if (ev.which == 13) {
        ev.preventDefault();
        // Do some stuff that handles the enter key
    }
});

Je veux abréger à ceci:

$('#myInput').enterKey(function() {
    // Do some stuff that handles the enter key
});

déclencheur et lier de ne pas raconter toute l'histoire - c'est un plugin JQuery. http://docs.jquery.com/Plugins/Authoring

Le "enterKey" la fonction se joint à une propriété de jQuery.fn - c'est le code nécessaire:

(function($){
    $('body').on('keydown', 'input', function(ev) {
        if (ev.which == 13) {
            var enterEv = $.extend({}, ev, { type: 'enterKey' });
            return $(this).trigger(enterEv);
        }
    });

    $.fn.enterKey = function(selector, data, fn) {
        return this.on('enterKey', selector, data, fn);
    };
})(jQuery);

http://jsfiddle.net/b9chris/CkvuJ/

Un concept de ce qui précède est que vous pouvez manipuler au clavier d'entrée gracieusement sur le lien auditeurs comme:

$('a.button').on('click enterKey', function(ev) {
    ev.preventDefault();
    ...
});

Modifications: mise à Jour pour bien passer le droit this contexte pour le gestionnaire, et de renvoyer une valeur de retour en arrière à partir du gestionnaire de jQuery (par exemple dans le cas où vous étiez à la recherche d'annuler l'événement et la formation de bulles). Mise à jour pour passer un bon jQuery objet d'événement pour les gestionnaires, y compris le code de la clé et de la capacité d'annuler l'événement.

Vieux jsfiddle: http://jsfiddle.net/b9chris/VwEb9/24/

Answer 5

C'est un vieux post, mais je vais essayer de le mettre à jour avec de nouvelles informations.

Pour utiliser les événements dont vous avez besoin pour la lier à certains élément du DOM et à les déclencher. Si vous avez besoin d'utiliser

.sur la (les) méthode prend un type d'événement et un événement de la manipulation de la fonction en tant que les arguments. En option, il peut également recevoir des événements des données liées à son deuxième argument, en poussant la gestion des événements de la fonction à la troisième argument. Toutes les données transmises seront disponibles à l'événement fonction de gestion dans la propriété data de l'objet d'événement. L'événement fonction de gestion reçoit toujours l'objet d'événement comme de sa première argument.

et

.méthode trigger() prend un type d'événement comme argument. En option, il pouvez également prendre un tableau de valeurs. Ces valeurs seront transmises à l' la gestion des événements de la fonction en tant qu'arguments après l'événement de l'objet.

Le code ressemble à ceci:

$(document).on("getMsg", {
    msg: "Hello to everyone",
    time: new Date()
}, function(e, param) {
    console.log( e.data.msg );
    console.log( e.data.time );
    console.log( param );
});

$( document ).trigger("getMsg", [ "Hello guys"] );

Belle explication peut être trouvée ici et ici. Exactement pourquoi cela peut être utile? J'ai trouvé comment l'utiliser dans cette excellente explication de la part de twitter ingénieur.

P. S. Dans la plaine de javascript, vous pouvez le faire avec de nouveaux CustomEvent, mais méfiez-vous de l'IE et Safari problèmes.