Cliquez sur le déclencheur jQuery

Le message d’aujourd’hui vous renseignera sur l’événement de clic déclencheur de jQuery.

Déclencher un événement de clic dans jQuery

jQuery fournit une méthode déclencheur qui exécute tous les gestionnaires et comportements attachés aux éléments correspondants pour le type d’événement spécifié.

Syntaxe:

.trigger(eventType[, extraParameters])

1. eventType est une chaîne contenant un type d’événement JavaScript, tel qu’un clic ou un envoi.
2. extraParameters sont des paramètres supplémentaires à passer au gestionnaire d’événements.

Tous les gestionnaires d’événements associés à .on() ou à l’une de ses techniques de raccourci sont précipités pendant que l’événement correspondant se produit. Cependant, ils peuvent être déclenchés manuellement à l’aide de la méthode .trigger().

Un appel à .trigger() exécute les gestionnaires dans le même ordre qu’ils pourraient être si l’événement avait été déclenché par l’utilisateur.

Depuis jQuery 1.3, les événements .trigger() apparaissent dans l’arborescence DOM ; un gestionnaire d’événements peut empêcher le bouillonnement en renvoyant false du gestionnaire ou en appelant l’approche .stopPropagation() sur l’objet événement dépassé dans l’événement. Bien que .trigger() simule une activation d’événement entière avec un objet d’événement synthétisé, il ne réplique plus parfaitement un événement en cours.

L’objet événement est constamment transmis comme premier paramètre à un gestionnaire d’événements. Un tableau d’arguments peut également être transmis à l’appel .trigger(), et ces paramètres peuvent être dépassés par le gestionnaire en suivant correctement l’objet événement.

Depuis jQuery 1.6.2, une seule chaîne ou un argument numérique peut être passé sans être enfermé dans un tableau.

La technique .trigger() peut être utilisée dans des collections jQuery qui enveloppent des objets JavaScript simples similaires à un mécanisme Pub/Sub ; tout gestionnaire d’événement donné pour l’objet peut être appelé lorsque l’événement est déclenché.

Comprenons-le avec l’exemple suivant.

<a onclick="doSomething()">Google</a>
<button type="button" id="trigger-btn">Trigger</button>

$('#trigger-btn').click(function() {
  console.log('triggering')
  $('a').trigger('click');
});

function doSomething() {
  alert('Click event is triggered on the link.');
}

Dans l’exemple ci-dessus, nous avons défini la fonction click qui avertit l’utilisateur. Vous pouvez passer l’attribut href avec un lien spécifique.

Prenons un exemple où un autre élément devrait déclencher ce click. Dans cet exemple, nous avons défini le bouton trigger qui déclenche le click.

Essayez d’exécuter l’extrait de code ci-dessus dans n’importe quel navigateur prenant en charge jQuery ; il affichera le résultat ci-dessous.

Production:

Démo