11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] [jQuery] Événements personnalisé

Bonjour à tous les Alsanautes.
Le sujet est un peu bizarre et pas accessible de prime abord mais bon... Smiley cligne

J'ai terminé ma «formation» en jQuery et j'ai voulu faire un petit plugin pour m'exercer un peu.

Le plugin doit effectuer certaines tâches en fonction des paramètres (événement particulièrement) et c'est là que tout bloque

Explication :
-> si l'utilisateur veut que l'action se produit au survol, il passe 'hover' en paramètre et le plugin effectue 2 actions (une au survol et l'autre quand la souris quitte l'élément)
-> s'il veut plutôt que sa ce passe au focus, il passera 'focus' en paramètre et les mêmes actions se produiront sauf que cette fois ça sera au gain et à la perte du focus.

Voici le code que j'ai essayé (je ne met que le code problématique pour vous épargner les inutilités Smiley smile ) sans succès...

/* event  est le paramètre envoyé au plugin */
   switch(event){
      case 'hover' :
          var IN = 'hover', OUT = 'mouseleave';
      break;
      case 'focus' :
         var IN = 'focus', OUT = 'blur';
      break;
      default :
         var IN = 'focus', OUT = 'blur';
   }
   $(this).IN(function(){ 
      /* événement au début (focus ou hover ) */
   });
   $(this).OUT(function(){
      /*événement à la fin (blur ou mouseleave) */
   });


Comme vous pouvez vous imaginer, l'événement appliquée sera en fonction du paramètre envoyé.

Comment le faire donc ??

Merci d'avance pour vos réactions
Modifié par Dimtrovich (17 May 2017 - 15:44)
Modérateur
Bonjour, en javascript, pour utiliser des appels dynamiques à des méthodes/propriétés il faut utiliser la notation tabulaire:

$(this)[IN](function(){});


Mais le plus simple et le plus propre, c'est que les méthode du genre .hover() ou .focus() ne sont que des raccourcis de .on() :


$(this).focus(function(){});
// est équivalent à:
$(this).on('focus', function(){});

et donc tu peux utiliser tes variables ainsi:

$(this).on(IN, function(){});
Meilleure solution
Je pense qu'il faut utiliser on() pour paramétrer ton événement. Ensuite cela dépend ce que tu veux faire mais pour un effet visuel cela pourrait être fait avec toggleClass() (il y a pleins d'autre fonctions toggle si tu cherches à faire ce genre de choses).
Modérateur
Fait attention, tu écris fonction() à la place de function() ça peut vite te jouer des tours...

PS : D'accord avec kustolovic & bzh Smiley smile
Merci pour vos réponses.
«Trop d'ecole tue (parfois) l'ecole ». Effectivement avec la méthode on() sa fonctione (pourquoi n'avais-je pas pensé plus tôt Smiley cligne ).et moi qui ai passé route la soirée d'hier à me casser la tête mais bon heureusement que vous êtes là Smiley smile .

@Yordi : pour le o à la place de u t'inquiète pas mon code n'a pas d'erreur à ce niveau. Le fait est que j'écrivais ce message à partir de mon téléphone et comme Android corrige automatiquement ça remplacé et je n'ai pas constaté. Je le met à jour pour ceux qui pourront avoir le même problème.

Une fois de plus merci les gars
Modifié par Dimtrovich (17 May 2017 - 15:39)
Sujet clos
Aller à