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


978

Est - il possible d'avoir keyup, keypress, bluret les changeévénements appellent la même fonction dans une ligne ou dois - je les faire séparément?

Le problème que j'ai, c'est que je dois valider certaines données avec une recherche db et je voudrais m'assurer que la validation n'est pas manquée dans tous les cas, qu'elle soit tapée ou collée dans la boîte.

Réponses:


1795

Vous pouvez utiliser .on()pour lier 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)

3
Avec les événements séparés par des espaces, comment incluez-vous également l'espacement des noms? .on('keyup.foo keypress.foo blur.foo change.foo', …)ou .on('keyup keypress blur change .foo', …)?
Sukima

24
Le problème est que myFunction sera probablement appelé plusieurs fois, ce que vous voudrez peut-être éviter.
Esger

2
Comment passer le paramètre dans cette fonction?
kushalvm

@Esger Quoi qu'il en soit, pour faire cela? Dans le mobile, j'en ai toujours besoin on('click tap', e => {...}). L'auditeur peut être déclenché deux fois, je veux juste déclencher une fois, comment puis-je coder dans la fonction d'écoute?
tomision

9
@Tomlsion Peut-être ajouter un nom de classe «occupé» à l'élément dans la fonction appelée, puis $('#element:not(.busy)').on('keyup keypress blur change', function(e){…});enfin supprimer le nom de classe «occupé».
Esger

60

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

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

1
Cela se fait pour un événement délégué, cela fonctionnera, mais ce n'est pas la manière la plus simple de le faire, ni la plus efficace.
Ben Taliadoros

1
La délégation d'événement est importante et peut (ou peut ne pas être) nécessaire selon le moment où le script est chargé / exécuté et si les éléments existent dans le DOM au moment où le script est chargé / exécuté.
random_user_name

45

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 qui sont intéressés, event.typeest 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 .


24

Vous pouvez utiliser la méthode bind pour attacher une fonction à plusieurs événements. Passez simplement les noms d'événement et la fonction de gestionnaire comme dans ce code:

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

Une autre option consiste à utiliser le support de chaînage de jquery api.


9
Depuis jQuery 1.7, la méthode .on () est la méthode préférée pour attacher des gestionnaires d'événements à un document.
Dzhuneyt

18

Si vous associez le même gestionnaire d'événements à plusieurs événements, vous rencontrez souvent le problème de plusieurs d'entre eux qui se déclenchent à la fois (par exemple, l'utilisateur appuie sur l'onglet après la modification; la frappe, la modification et le flou peuvent tous se déclencher).

Cela ressemble à 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.
});

14

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);
    },
});

11

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énements que vous souhaitez sur votre objet pour déclencher cette fonction en utilisant on ('event') en laissant un espace entre les deux comme indiqué ci-dessous:

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

3
En général, vous devez expliquer votre réponse. Le simple fait de coller du code n'aide pas le PO à comprendre son problème ou votre solution.
leigero

que faire si j'ai besoin du premier argument de la fonction d'abonné d'événement jquery (événement)? Comment l'utiliser?
Dr.X

C'est ok, vous pouvez simplement déclarer la fonction avec le paramètre d'événement, puis y accéder à partir de la méthode. Ces événements passeront l'objet en eux-mêmes. J'espère que ça aide. var foo = fonction (événement) {console.log (événement); } $ ('# selector'). on ('keyup keypress blur change paste cut', foo);
Coder Of The Galaxy

7

La réponse de Tatu est de savoir comment 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 .on()méthode.

Je n'ai pas pu identifier exactement avec quelles versions de jQuery c'est le 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() {
    ...
}

puis 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 plus jolie solution, mais ça marche pour moi, et j'ai pensé que je la mettrais là pour aider les autres qui pourraient tomber sur ce problème


5
$("element").on("event1 event2 event..n", function() {
   //execution
});

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


4

Est - il possible d'avoir keyup, keypress, bluret les changeévénements appellent la même fonction dans une ligne?

Il est possible d'utiliser .on(), qui accepte la structure suivante:, .on( events [, selector ] [, data ], handler )vous pouvez donc transmettre 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`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">


2

Il est simple d'implémenter cela avec les méthodes DOM intégrées sans une grande bibliothèque comme jQuery, si vous voulez, cela prend juste un peu plus de code - itérez sur un tableau de noms d'événements, et ajoutez un écouteur pour chacun:

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.