web-dev-qa-db-fra.com

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

Existe-t-il un moyen de faire en sorte que les événements keyup, keypress, blur et change appellent la même fonction sur une ligne ou dois-je les effectuer séparément?

Le problème que j’ai, c’est que j’ai besoin de valider certaines données avec une recherche dans la base de données et que j’aimerais être sûr que la validation n’est pas oubliée, qu’elle soit tapée ou collée dans la zone.

jqueryeventsjquery-events
914
shaneburgess

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)
1672
Tatu Ulmanen

Depuis jQuery 1.7, la méthode .on() est la méthode recommandé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");
})
56
lesyk

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

Donc, pour ceux que ça 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 .

43
Alain Tiemblo

Vous pouvez utiliser méthode de liaison pour attacher une fonction à plusieurs événements. Il suffit de transmettre 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 d'enchaînement de jquery api.

22
Giorgi

Si vous associez le même gestionnaire d'événements à plusieurs événements, vous rencontrez souvent le problème du déclenchement simultané de plusieurs d'entre eux (par exemple, l'utilisateur appuie sur la touche de tabulation après la modification; le raccourci clavier, les modifications et le flou peuvent tous se déclencher).

Cela ressemble à ce que vous voulez réellement, c'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.
});
16
Dave Ward

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

Vous pouvez définir la fonction que vous souhaitez réutiliser comme suit:

var foo = function() {...}

Et plus tard, vous pouvez définir le nombre d’écouteurs d’événements que vous voulez sur votre objet pour qu'il déclenche 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);
11
Coder Of The Galaxy

La réponse de Tatu est comment je le ferais intuitivement, mais j’ai rencontré quelques problèmes dans Internet Explorer avec cette méthode d’imbrication/de liaison des événements, même si cela se fait à l’aide de la méthode .on() .

Je n'ai pas été en mesure de déterminer exactement avec quelles versions de jQuery le problème se pose. 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 solution la plus jolie, mais cela fonctionne pour moi et j’ai pensé que j’en parlerais pour aider les autres qui pourraient trébucher sur ce problème.

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

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

4
Guest

"Y a-t-il un moyen d'avoir les événements keyup, keypress, blur et change appellent la même fonction sur une seule ligne?"

Il est possible d'utiliser .on(), qui accepte la structure suivante: .on( events [, selector ] [, data ], handler ), afin de pouvoir 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">
3
Commercial Suicide

Il est simple de l'implémenter avec les méthodes DOM intégrées sans une grande bibliothèque comme jQuery. Si vous le souhaitez, cela prend juste un peu plus de code - parcourez 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);
});
1
CertainPerformance