Explication détaillée de la liaison des événements jQuery sur(), bind() et délégué() méthodes

Explication détaillée de la liaison des événements jQuery sur(), bind() et délégué() méthodes_jquery

WBOY

Libérer： 2016-05-16 15:56:58

original

1116 Les gens l'ont consulté

J'étudie js depuis un certain temps. Au cours du processus d'apprentissage, j'ai découvert que lors de la liaison d'événements dans jQuery, certaines personnes utilisent bind(), certaines utilisent on(), certaines utilisent délégué() et d'autres utilisent live. (). Quand j'ai regardé le code, j'ai senti que les fonctions avaient été implémentées, alors je l'ai ignoré. Cependant, je n'ai toujours pas bien compris la différence entre elles, j'ai donc vérifié les informations aujourd'hui et fait moi-même un résumé. .

La raison pour laquelle il existe autant de types de méthodes de liaison est que la version de jQuery est mise à jour. Par exemple, la méthode on() est apparue après la version 1.7.

Sur la page de l'API de liaison d'événements jQuery, il est mentionné que la méthode live() est obsolète et son utilisation n'est pas recommandée. Nous examinons donc ici principalement les trois méthodes suivantes : bind(), délégué(), on()

Nous préparons une page html pour tester différents types de liaison d'événements.

<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div>
  <button id="btn">添加新的p元素</button>
  <p>第一个p元素</p>
  <p>第二个p元素</p>
  <p>第三个p元素</p>
  <p>第四个p元素</p>
  <p>第五个p元素</p>
</div>

<script>
$("#btn").click(function(){
  $("div").append("<p>这是一个新的p元素</p>");
});
</script>

</body>
</html>

Copier après la connexion

Une page simple avec un div, plusieurs éléments p et un bouton à l'intérieur du div. Cliquez sur le bouton pour ajouter des éléments p. Ensuite, nous lierons l'événement click à l'élément p de la page.

lier()

Utilisation

Copier le code Le code est le suivant :

$("div p").bind("clic", function () {

alert($(this).text());

})

De cette façon, l'événement click est lié à tous les éléments p du div, et la réponse est d'afficher son contenu. La liaison est simple et rapide, mais il y a ici deux problèmes :
La première question est que la méthode d'itération implicite est utilisée ici. S'il y a trop d'éléments correspondants, par exemple, si je mets 50 p éléments dans un div, je devrai effectuer une liaison 50 fois. Pour un grand nombre d’éléments, les performances sont affectées.
Mais s’il s’agit d’un sélecteur d’identifiant, parce que l’identifiant est unique, il est très rapide d’utiliser la méthode bind().
Le deuxième problème est que des éléments qui n’existent pas encore ne peuvent être liés. Cliquer sur le bouton sur la page ajoutera dynamiquement un élément p. Si vous cliquez sur cet élément p, vous constaterez qu'il n'y a pas de réponse d'action.
Ces deux problèmes peuvent être résolus en utilisant la méthode déléguée.

De plus, il existe une abréviation pour la méthode bind(). Le code ci-dessus peut également être remplacé par :

Copier le code Le code est le suivant :

$("div p").click(function () {

alert($(this).text());

})

délégué()

Utilisation

Copier le code Le code est le suivant :

$("div").delegate("p", "clic", function () {

alert($(this).text());

});

Cette approche utilise la notion de délégation d'événement. Au lieu de lier les événements directement à l'élément p, liez les événements à son élément parent (ou aux éléments ancêtres également). Lorsque vous cliquez sur n'importe quel élément du div, l'événement remontera couche par couche depuis la cible de l'événement jusqu'à ce qu'il atteigne The. élément auquel vous liez l’événement, tel que l’élément div dans cet exemple. Pendant le processus de bouillonnement, si le currentTarget de l'événement correspond au sélecteur, le code sera exécuté.

Cela résout les deux problèmes ci-dessus liés à l'utilisation de la méthode bind(). Il n'est pas nécessaire de lier les événements aux éléments p un par un. Vous pouvez également lier les éléments p ajoutés dynamiquement. Même si vous liez un événement à un document, vous n'avez pas besoin d'attendre que le document soit prêt à effectuer la liaison.

De cette façon, la liaison est facile, mais des problèmes peuvent également survenir lors de l'appel. Si la cible de l'événement est très profonde dans l'arborescence DOM, remonter couche par couche pour trouver les éléments qui correspondent au sélecteur affectera les performances.

on()

on() unifie en fait les méthodes d'événement de liaison précédentes. En regardant le code source non compressé de jQuery (la version que je regarde ici est 1.11.3), vous pouvez constater que bind() et délégué() sont en fait Ce qui est obtenu grâce à la méthode on(), c'est simplement que les paramètres sont différents.

Copier le code Le code est le suivant :

 
bind: fonction (types, données, fn) {

Renvoie this.on( types, null, data, fn );

},

dissocier : fonction (types, fn) {

Renvoie this.off( types, null, fn );

},

délégué : fonction (sélecteur, types, données, fn) {

Renvoie this.on( types, sélecteur, données, fn );

>

​ annuler la délégation : fonction (sélecteur, types, fn) {

// ( espace de noms ) ou ( sélecteur, types [, fn] )

Return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );

>

Dans l'exemple ci-dessus, on() peut être utilisé pour la liaison comme suit :

Copier le code Le code est le suivant :

$("div").on("clic","p",function(){

alert($(this).text());

})

Suggestion de documentation officielle :

Depuis jQuery 1.7, la méthode .on() est la méthode préférée pour attacher des gestionnaires d'événements à un document.

Essayez d'utiliser on() pour lier des événements.

Supprimer l'événement

correspond aux méthodes de liaison bind(), délégué() et on(), et les méthodes de suppression d'événements sont :

Copier le code Le code est le suivant :

$( "div p" ).unbind( "clic", gestionnaire);

$( "div" ).undelegate( "p", "click", gestionnaire);

$( "div" ).off( "clic", "p", gestionnaire);

En plus de supprimer la liaison d'événement spécifiée comme ci-dessus, vous pouvez également supprimer toutes les liaisons d'événements sans passer de paramètres. Je ne les listerai pas une par une ici. La documentation officielle de jQuery est très détaillée.

Résumé

1. Lorsque le sélecteur contient de nombreux éléments, n'utilisez pas bind() pour lier de manière itérative

2. Lorsque vous utilisez le sélecteur d'identifiant, vous pouvez utiliser bind()

3. Lorsque vous devez lier des éléments ajoutés dynamiquement, utilisez délégué() ou on()

4. Utilisez les méthodes délégué() et on(), et l'arborescence DOM ne doit pas être trop profonde

5. Essayez d'utiliser on()

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.