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

Question

Est-il possible d'avoir keyup, keypress, blur et événements change appeler la même fonction dans une ligne 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 db et que vous souhaitez faire la validation vous est pas manqué dans tous les cas, si elle est tapé ou collé 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 tout simplement passer la fonction comme paramètre aux fonctions d'événement normal:

var myFunction = function() {
   ...
}

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

Answer 2

Au jQuery 1,7, le procédé de .on() est le procédé préféré pour la fixation des gestionnaires d'événements à un document. Pour les versions antérieures, le procédé de .bind() est utilisé pour attacher un gestionnaire d'événement 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 quand jQuery écoute plusieurs événements à la fois, et Google m'a mis ici.

Alors, pour les personnes intéressées, 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 jQuery doc .

Answer 4

Vous pouvez utiliser méthode bind pour attacher la fonction à plusieurs événements. Il suffit de passer 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 enchaînant support de jquery api.

Answer 5

Si vous attachez le même gestionnaire d'événements à plusieurs événements, vous exécutez souvent dans la question de plus d'un d'entre eux tirant à la fois (par exemple, l'utilisateur appuie sur l'onglet après la modification, keydown, le changement et le flou pourrait tout feu).

On dirait que ce que vous voulez réellement 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.
});

Answer 6

Voici comment je le fais.

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

Answer 7

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

var foo = function() {...}

Et plus tard, vous pouvez définir mais de nombreux auditeurs d'événements que vous voulez sur votre objet pour déclencher cette fonction à l'aide de ( « événement ») en laissant un espace entre comme indiqué ci-dessous:

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

Answer 8

La réponse par Tatu est de savoir comment je intuitivement le faire, mais je l'ai connu quelques problèmes dans Internet Explorer avec cette façon d'imbrication / liant les événements, même si elle se fait à travers .on() .

Je havn't été en mesure de déterminer exactement quelles versions de jQuery c'est le problème avec. Mais je vois parfois le problème dans les versions suivantes:

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

Ma solution a été d'abord définir la fonction,

function myFunction() {
    ...
}

et 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 je pensais que je le mettrais là-bas pour aider les autres qui pourraient tomber par hasard sur cette question

Answer 9

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

Ce tutoriel est sur le point gérer plusieurs événements.

Answer 10

"Est-il possible d'avoir keyup, keypress, blur et événements change appeler la même fonction dans une ligne?"

Il est possible à l'aide .on(), qui accepte la structure suivante: .on( events [, selector ] [, data ], handler ), de sorte que vous pouvez passer plusieurs événements à cette méthode. Dans votre cas, il 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">

Answer 11

Il est simple à mettre en œuvre ce avec les méthodes DOM intégré sans une grande bibliothèque comme jQuery, si vous voulez, il faut juste un peu plus de code - itérer sur un tableau de noms d'événements, et ajouter un écouteur pour chaque:

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});