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

Question

Y a-t-il un moyen d'avoir keyup , keypress , blur y change appellent la même fonction en une seule ligne ou dois-je les faire séparément ?

Le problème auquel je suis confronté est que je dois valider certaines données à l'aide d'une consultation de base de données et que je voudrais m'assurer que la validation n'est pas omise dans tous les cas, que les données soient tapées ou collées dans la boîte.

Answer 1

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 simplement passer la fonction comme paramètre aux fonctions d'événement normales :

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

Answer 2

À partir de la version 1.7 de jQuery, la fonction .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");
})

Answer 3

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.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 Document sur jQuery .

Answer 4

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

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

Une autre option consiste à utiliser le support de chaînage de l'API de Jquery.

Answer 5

Si vous attachez le même gestionnaire d'événements à plusieurs événements, vous rencontrez souvent le problème de l'exécution simultanée de plusieurs d'entre eux (par exemple, l'utilisateur appuie sur la touche de tabulation après l'édition ; l'appui sur la touche, la modification et le flou peuvent tous s'exécuter).

On dirait que ce que vous voulez vraiment est quelque chose comme ça :

$('#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.
});