jQuery plusieurs événements pour déclencher la même fonction

Existe-t-il un moyen d’avoir la même fonction dans une seule ligne en keyup , la keyup keypress , le blur et la change , ou dois-je les faire séparément?

Le problème que j’ai est que je dois valider certaines données avec une recherche de firebase database et que vous voulez vous assurer que la validation n’est pas manquée, que ce soit dans la boîte ou qu’elle soit saisie.

Vous pouvez utiliser .on() pour associer une fonction à plusieurs événements:

 $('#element').on('keyup keypress blur change', function(e) { // e.type is the type of event fired }); 

Ou passez simplement la fonction comme paramètre aux fonctions d’événement normales:

 var myFunction = function() { ... } $('#element') .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction) 

À partir de jQuery 1.7, la méthode .on() est la méthode préférée pour attacher des gestionnaires d’événements à un document. Pour les versions antérieures, la méthode .bind() est utilisée pour attacher un gestionnaire d’événements directement aux éléments.

 $(document).on('mouseover mouseout',".brand", function () { $(".star").toggleClass("hovered"); }) 

Je cherchais un moyen d’obtenir le type d’événement lorsque jQuery écoute plusieurs événements à la fois, et Google m’a mis ici.

Donc, pour ceux que event.type intéresse, event.type est ma réponse:

 $('#element').on('keyup keypress blur change', function(event) { alert(event.type); // keyup OR keypress OR blur OR change }); 

Plus d’informations dans le doc jQuery .

Vous pouvez utiliser la méthode de liaison pour attacher une fonction à plusieurs événements. Il suffit de passer les noms des événements et la fonction du gestionnaire comme dans ce code:

 $('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered'); }); 

Une autre option consiste à utiliser le support de chaînage d’API jquery.

Si vous attachez le même gestionnaire d’événement à plusieurs événements, vous rencontrez souvent le problème de plusieurs déclenchements simultanés (par exemple, l’utilisateur appuie sur l’onglet après l’édition, le démarrage, la modification et le flou peuvent être déclenchés).

On dirait que ce que vous voulez réellement, c’est quelque chose comme ceci:

 $('#ValidatedInput').keydown(function(evt) { // If enter is pressed if (evt.keyCode === 13) { evt.preventDefault(); // If changes have been made to the input's value, // blur() will result in a change event being fired. this.blur(); } }); $('#ValidatedInput').change(function(evt) { var valueToValidate = this.value; // Your validation callback/logic here. }); 

Vous pouvez définir la fonction que vous souhaitez réutiliser comme ci-dessous:

 var foo = function() {...} 

Et plus tard, vous pouvez définir autant d’écouteurs d’événement que vous voulez sur votre object pour déclencher cette fonction en utilisant on (‘event’) en laissant un espace comme indiqué ci-dessous:

 $('#selector').on('keyup keypress blur change paste cut', foo); 

C’est comme ça que je le fais.

  $("input[name='title']").on({ "change keyup": function(e){ var slug = $(this).val().split(" ").join("-").toLowerCase(); $("input[name='slug']").val(slug); }, }); 

La réponse de Tatu est que je le ferais intuitivement, mais j’ai rencontré des problèmes dans Internet Explorer avec cette façon d’imbriquer / de lier les événements, même si cela se fait par la méthode .on() .

Je n’ai pas pu identifier exactement les versions de jQuery qui posent problème. Mais je vois parfois le problème dans les versions suivantes:

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • Mobile 1.3.0b1
  • Mobile 1.4.2
  • Mobile 1.2.0

Ma solution de contournement a été de définir d’abord la fonction,

 function myFunction() { ... } 

et ensuite gérer les événements individuellement

 // Call individually due to IE not handling binds properly $(window).on("scroll", myFunction); $(window).on("resize", myFunction); 

Ce n’est pas la solution la plus jolie, mais cela fonctionne pour moi, et j’ai pensé que je le mettrais en place pour aider les autres qui pourraient tomber sur cette question.

“Existe-t-il un moyen d’avoir la même fonction en une seule ligne keyup aux fonctions de keyup , de keyup , de blur et de change ?”

C’est possible en utilisant .on() , qui accepte la structure suivante: .on( events [, selector ] [, data ], handler ) , vous pouvez donc passer plusieurs événements à cette méthode. Dans votre cas, cela devrait ressembler à ceci:

 $('#target').on('keyup keypress blur change', function(e) { // "e" is an event, you can detect the type of event using "e.type" }); 

Et voici l’exemple en direct:

 $('#target').on('keyup keypress blur change', function(e) { console.log(`"${e.type.toUpperCase()}" event happened`) }); 
   
 $("element").on("event1 event2 event..n", function() { //execution }); 

Ce tutoriel concerne la gestion de plusieurs événements.