Il existe plusieurs façons d'ajouter des événements jquery

Les façons d'ajouter des événements jquery sont : 1. Utilisez JavaScript directement sur la balise, le code est concis et facile à comprendre sans introduire d'autres bibliothèques ou fichiers ; 2. Utilisez « onclick » « onmouseover » et d'autres méthodes pour le réorganiser en ; un fichier JavaScript séparé, plus facile à gérer et à partager ; 3. Événement de liaison ".bind()", qui peut lier plusieurs gestionnaires d'événements à un seul élément ; 4. Événement de liaison ".on()", qui prend en charge les gestionnaires d'événements délégués. complexité du code.

Le système d'exploitation de ce tutoriel : système Windows 10, jQuery version 3.6.0, ordinateur Dell G3.

jQuery propose de nombreuses façons d'ajouter des gestionnaires d'événements, en voici quatre :

1 Utilisez JavaScript directement sur l'étiquette

   ```HTML
   <button onclick="alert(&#39;Hello world!&#39;)">Click Me</button>
   ```

Avantages :

• Le code est simple et facile à comprendre

• . Pas besoin d'introduire d'autres bibliothèques ou fichiers

Inconvénients :

• Pas propice à la maintenance et à la réutilisation

• Couplage élevé, les codes JavaScript et HTML sont mélangés

2. Utilisez la méthode élément `. onclick ` / `onmouseover` etc

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   $(&#39;#foo&#39;).click(function() {
     alert(&#39;Hello world!&#39;);
   });
   ```

Avantages :

• Par rapport à l'utilisation de JavaScript directement sur la balise, le code peut être réorganisé dans un fichier JavaScript séparé, plus facile à gérer et à partager

• Prend en charge les chaînes

Inconvénients :

• S'il y a un grand nombre d'événements et de gestionnaires à mettre en place, cette méthode peut devenir verbeuse et difficile à maintenir
  

• Les méthodes objet s'appuient sur des événements liés au cycle de vie de l'objet lui-même

3. Utilisez `.bind()` pour lier des événements

   ```HTML
   <button id="foo">Click Me</button>
   ```
   ```javascript
   var foo = function() {
     alert(&#39;Hello world!&#39;);
   };
   $(&#39;#foo&#39;).bind(&#39;click&#39;, foo);
   ```

Avantages :

• Vous pouvez lier plusieurs gestionnaires d'événements à un seul élément
  

• `$.bind()` Et la méthode `$.unbind()` peut être utilisée pour surveiller le processus d'inscription/désinscription d'un événement

Inconvénients :

• `.bind()` est obsolète dans jQuery version 3.0, il est recommandé d'utiliser ` .on()`

4. Utilisez `.on()` pour lier des événements

Ce qui suit est un exemple de code pour la liaison d'événements à l'aide de la méthode `.on()` de jQuery :

```javascript
$(document).on('click', '#myButton', function() {
  // 事件处理程序
});
```

`.on ()` Méthode Peut accepter trois paramètres. Le premier paramètre est le type d'événement à écouter/lié ; le deuxième paramètre est une chaîne de sélection facultative ou un nœud DOM, utilisé pour limiter l'ensemble des éléments de réponse ; le troisième paramètre est la fonction de rappel, qui correspond au moment où l'événement se produit ; action à réaliser.

Avantages : La méthode

• `.on()` vous permet d'ajouter plusieurs gestionnaires d'événements pour les documents/éléments avec une grande flexibilité.
  

• Le gestionnaire d'événements ajouté peut être supprimé via la méthode `off()`. La méthode

• `.on()` prend également en charge les gestionnaires d'événements délégués, ce qui réduira considérablement la complexité du code lors de l'utilisation d'un grand nombre d'éléments ou de l'ajout dynamique d'éléments.

Inconvénients :

• En fonction du nombre d'événements et d'éléments attachés, la liaison directe de nombreux gestionnaires d'événements peut entraîner des problèmes de performances.
  

• Vous ne pouvez pas utiliser `.on()` dans l'ancien code avec une version de jQuery inférieure à 1.7, vous devez utiliser d'autres méthodes telles que `.bind()` (notez que cette méthode sera également obsolète à l'avenir ) et `.delegate ()`.

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!