Analyser les principes internes de l'écriture de jQuery pour déclencher des événements

Dans le développement Web, la liaison d'événements jQuery joue un rôle très important. Il peut aider les développeurs à percevoir divers changements de paramètres d'entrée sur la page et à obtenir une interaction en temps réel avec la page. Pour implémenter la liaison d'événements, nous devons comprendre les principes internes. Alors, jQuery peut-il déclencher des événements ? Ensuite, découvrons-le.

1. Comment jQuery lie les événements

Dans jQuery, nous pouvons lier des événements de plusieurs manières, comme indiqué ci-dessous.

1.1 Liaison d'événements via des sélecteurs

La liaison d'événements via des sélecteurs est l'une des méthodes les plus couramment utilisées dans jQuery. Le code est le suivant :

$('#btn').click(function(){
  console.log('btn clicked');
});

Le code ci-dessus lie un événement de clic via le sélecteur. Lorsque vous cliquez sur le bouton avec l'identifiant btn sur la page, "btn clicked" sera affiché sur la console.

1.2 Liaison d'événements via la méthode .on()

Après la version 1.7 de jQuery, il est officiellement recommandé d'utiliser la méthode .on() pour lier des événements. Le code est le suivant :

$('#btn').on('click', function(){
  console.log('btn clicked');
});

C'est aussi l'événement click du bouton lié, mais il est implémenté à l'aide de la méthode .on(). Cette méthode est plus couramment utilisée dans jQuery.

1.3 Lier des événements via la méthode .bind()

Dans les anciennes versions, vous pouvez également utiliser la méthode .bind() pour lier des événements. Le code est le suivant :

$('#btn').bind('click', function(){
  console.log('btn clicked');
});

2. Comment jQuery déclenche des événements

Après avoir compris comment jQuery lie les événements, voyons ensuite comment jQuery déclenche des événements. Généralement, nous déclenchons des événements via l'interaction de l'utilisateur, etc. Cependant, dans certains cas, nous devons également déclencher l'événement dont nous avons besoin après le déclenchement d'autres événements, ce qui nécessite l'utilisation de jQuery pour déclencher manuellement l'événement.

2.1 Utilisez la méthode .trigger() pour déclencher des événements

Dans jQuery, nous pouvons utiliser la méthode .trigger() pour déclencher manuellement des événements. Comme indiqué ci-dessous :

$('#btn').trigger('click');

Le code ci-dessus indique que lorsque l'on clique sur le bouton avec l'identifiant btn sur la page, l'événement de clic lié au bouton est directement déclenché.

2.2 Utilisez la méthode .triggerHandler() pour déclencher des événements

Différent de la méthode .trigger(), la méthode .triggerHandler() déclenche uniquement le gestionnaire d'événements du premier élément correspondant. Le code est le suivant :

$('#btn').triggerHandler('click');

3. Résumé

Grâce à l'explication ci-dessus, nous pouvons comprendre que dans jQuery, les événements de liaison et les événements de déclenchement sont très simples. Nous pouvons lier divers événements via le sélecteur, la méthode .on() ou la méthode .bind() ; déclencher manuellement les événements requis via la méthode .trigger() ou .triggerHandler(). Bien sûr, nous devons faire attention à éviter d’abuser des événements de déclenchement manuel pour éviter que cela n’affecte les performances et la lisibilité du programme.

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!