Maison > interface Web > js tutoriel > le corps du texte

Une brève discussion sur la liaison personnalisée de jQuery

零下一度
Libérer: 2017-06-19 10:52:29
original
1353 Les gens l'ont consulté

jqueryLiaison personnalisée

Voyons d'abord comment utiliser la liaison personnalisée de jQuery. Vous pouvez utiliser bind ou live pour vous abonner à un événement (Of. bien sûr, on peut également être utilisé après la 1.7), le code est le suivant :


$("#myElement").bind('customEventName',function(e){ ... });
$(".elementsClass").live('customEventName',function(e){ ... });
Copier après la connexion


Déclenchez ensuite l'événement dans le de la manière suivante :


$("#myelement").trigger('customEventName');
Copier après la connexion


Ou vous pouvez ajouter des paramètres supplémentaires à l'événement personnalisé, par exemple :


$("#myelement").bind('customEventName',function(e,data){ if(data.custom) ... });
$("#myelement").trigger('customEventName',{ custom: false });
Copier après la connexion


Mise à niveau magique

La mise à niveau dite magique signifie en fait que tous les événements personnalisés de l'ensemble du programme peuvent être automatiquement enregistrés et lié Définissez-le sur jQuery, puis lorsqu'il sera exécuté, tous les modules qui ont enregistré l'événement seront exécutés. Par exemple, la méthode UserUpdate définie dans le module User.js et la méthode BlogUpdate définie dans Blogs.js définissent toutes deux la fonctionfonction qui doit être exécutée lors de la publication d'un blog. Nous pouvons nous lier à un conteneur spécifié par jQuery (tel que document) en enregistrant un nom d'événement unifié (tel que BlogAdded), puis après avoir publié avec succès le blog, exécutez $(document).trigger("BlodAdded ") C'est OK.

Ci-dessous, nous donnons un exemple de code général :


    var components = [User, Blog, Group, Friend, Topic, Photo];
var eventTypes = ["AddComplete", "UpdateComplete", "DeleteComplete", "LockComplete", "UnLockComplete"];
      $.each(components, function(i,component) {
        $.each(eventTypes, function(i,eventType) {
var handler = component[eventType];
if (handler) $(document).bind(eventType, handler);
        });
      })
Copier après la connexion


Ensuite, chaque module js définit le code installe au format suivant :


    User= {
      AddComplete: function(e, data) {
//...
      },
      UpdateComplete: function(e, data) {
//...
      }
    }
Copier après la connexion


De cette façon, peu importe où vous l'êtes, si nous en avons besoin, nous pouvons utiliser jQuery pour déclencher nos événements :


$(document).trigger("UpdateComplete", data);
Copier après la connexion


Par cette méthode, vous pouvez trouver que la méthode d'un module ne peut enregistrer qu'un seul événement. Si nous utilisons une méthode pour enregistrer plusieurs déclencheurs d'événements, nous pouvons utiliser la méthode suivante :


    var blogController = {
      blogAddOrUpdateComplete: function() {
//...
      }
    }
    blogController.blogAddComplete = blogController.blogUpdateComplete = blogController.blogAddOrUpdateComplete;
Copier après la connexion


Remarque finale : cet article montre simplement un exemple simple. Ne mélangez pas l'utilisation du même nom d'événement dans différents modules. Par exemple, AddComplete et AddComplete dans User. js AddComplete dans Blog.js peut ne pas être lié du tout, c'est-à-dire qu'il ne traite que sa propre logique correspondante. À ce stade, cet événement ne doit pas être traité de manière uniforme, mais si les éléments à détecter sont les mêmes, vous pouvez le faire. peut l'utiliser, comme DisableUserComplete, il peut être utilisé universellement, car le module Utilisateur doit gérer les opérations après la désactivation du compte, et le module Blog peut également avoir besoin de gérer les opérations après la désactivation du compte.

Conclusion

Notes de l'oncle : Destinées à enregistrer divers conseils et informations (y compris, mais sans s'y limiter, la technologie) dans le travail quotidien, s'ils vous sont utiles , s'il vous plaît, recommandez-en un pour donner à votre oncle la motivation d'écrire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal