Plusieurs contrôles jquery peuvent-ils lier un événement ?

Dans le développement web, il est souvent nécessaire de lier le même événement à plusieurs contrôles pour réaliser la même fonction. Par exemple, cliquer sur plusieurs boutons déclenchera le même événement. jQuery peut implémenter cette fonction très facilement. Présentons en détail comment utiliser jQuery pour lier le même événement à plusieurs contrôles.

1. Lier un seul événement de contrôle

Pour lier un événement à un contrôle dans jQuery, vous pouvez utiliser le code suivant :

$(selector).bind(eventType, handler);

Parmi eux, selector représente le sélecteur de contrôle à lier à l'événement, eventType représente le type d'événement à lier et handler représente la fonction de traitement d'événement. Par exemple, le code suivant lie un événement de clic au bouton avec l'identifiant btn :

$('#btn').bind('click', function() {
  alert('按钮被点击了！');
});

2. Bind multiple control events

in En développement actuel , il est souvent nécessaire de lier le même événement à plusieurs contrôles. Si vous utilisez le code ci-dessus pour lier des événements à chaque contrôle, cela sera très gênant. Pour simplifier le code, vous pouvez utiliser les méthodes fournies par jQuery pour lier des événements à plusieurs contrôles en même temps.

$(selector1, selector2, ..., selectorN).bind(eventType, handler);

Parmi eux, plusieurs sélecteurs séparés par des virgules représentent plusieurs contrôles auxquels les événements sont liés. La signification de eventType et du gestionnaire est la même que celle de la liaison d'événements à un seul contrôle. Par exemple, le code suivant lie un événement de clic aux trois boutons avec les ID btn1, btn2 et btn3 :

$('#btn1, #btn2, #btn3').bind('click', function() {
  alert('按钮被点击了！');
});

3. Utilisez la méthode on pour lier l'événement
#🎜 🎜 #

Après la version jQuery 1.7, il est recommandé d'utiliser la méthode on pour lier les événements. L'utilisation de la méthode on est similaire à la méthode bind, mais la syntaxe est légèrement différente. Vous pouvez également utiliser la méthode on pour lier le même événement à plusieurs contrôles en même temps.

$(selector1, selector2, ..., selectorN).on(eventType, handler);

Par exemple, le code suivant lie un événement de clic à tous les boutons avec la classe btn :

$('.btn').on('click', function() {
  alert('按钮被点击了！');
});

Unbind event
# 🎜🎜#Si vous n'avez plus besoin de l'événement d'un contrôle, vous pouvez utiliser la méthode unbind ou off fournie par jQuery pour le dissocier.

$(selector).unbind(eventType, handler);
$(selector).off(eventType, handler);

Parmi eux, selector représente le sélecteur de contrôle pour dissocier l'événement, eventType représente le type d'événement à dissocier et handler représente la fonction de traitement d'événement. Par exemple, le code suivant désactive l'événement click du bouton avec l'identifiant btn :

$('#btn').unbind('click');
$('#btn').off('click');

Notes

5. Lors de la liaison de plusieurs contrôles Lorsqu'il s'agit de le même événement, vous devez faire attention aux problèmes suivants :

Si la fonction de gestion des événements doit utiliser certaines propriétés ou valeurs du contrôle, alors vous devez utiliser le ce mot-clé pour obtenir les propriétés du contrôle ou de la valeur actuelle.

• Si la fonction de gestion des événements liée à plusieurs contrôles est la même, vous pouvez définir la fonction de gestion des événements en tant que fonction publique, puis transmettre le nom de la fonction lors de l'appel de l'événement lié.
• Si différentes fonctions de gestion d'événements sont liées au même contrôle en même temps, toutes les fonctions de gestion d'événements doivent être libérées lors de la dissociation.
• Ce qui précède est une introduction détaillée à l'utilisation de jQuery pour lier le même événement à plusieurs contrôles. Lorsque vous rencontrez une situation dans laquelle vous devez lier le même événement à plusieurs contrôles, vous pouvez choisir la méthode appropriée pour lier et dissocier en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!