Explication détaillée des méthodes de liaison d'événements jQuery on(), bind() et délégué()-js tutoriel-php.cn

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

高洛峰

Libérer： 2017-01-04 10:06:02

original

1042 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 tant 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 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>
<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.

bind()

Usage

$("div p").bind("click", function () {
    alert($(this).text());
})

Copier après la connexion

De cette façon, l'événement click est lié à tous les p éléments du div, et la réponse est d'afficher son contenu. La liaison est très simple et rapide, mais il y a deux problèmes ici :
Le premier problème 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 éléments dans un div p. élément, vous devez effectuer la 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 les éléments qui n'existent pas encore ne peuvent pas ê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.
L'utilisation de la méthode déléguée peut résoudre ces deux problèmes.

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

$("div p").click(function () {
    alert($(this).text());
})

Copier après la connexion

delegate()

Usage<🎜. >

$("div").delegate("p", "click", function () {
    alert($(this).text());
});

Copier après la connexion

Cette approche utilise la notion de délégation événementielle. 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, et 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. Vérifiez le code source non compressé de jQuery (la version que je regarde ici est la 1.11.3). a constaté que bind() et délégué() sont en fait implémentés via la méthode on(), mais que les paramètres sont différents.

 bind: function( types, data, fn ) {
     return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
     return this.off( types, null, fn );
    },
    delegate: function( selector, types, data, fn ) {
     return this.on( types, selector, data, fn );
    }
    undelegate: function( selector, types, fn ) {
 // ( namespace ) or ( selector, types [, fn] )
     return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
    }

Copier après la connexion

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

$("div").on("click","p",function(){
    alert($(this).text());
})

Copier après la connexion

Recommandation de document officiel :

À partir de 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.

Suppression d'événements

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

$( "div p" ).unbind( "click", handler );
$( "div" ).undelegate( "p", "click", handler );
$( "div" ).off( "click", "p", handler );

Copier après la connexion

En plus de en supprimant les liaisons d'événements spécifiées 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. , vous pouvez utiliser bind()

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

4. Arbre DOM N'allez pas trop loin

5. Essayez d'utiliser on()

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

Pour des explications plus détaillées sur les méthodes de liaison d'événements jQuery on(), bind() et délégué(), veuillez faire attention au site Web PHP chinois !