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

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.

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)

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

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 .

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.

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

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

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

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

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

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

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">

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