Quelle est la différence entre jquery et bind-js tutoriel-php.cn

Quelle est la différence entre jquery et bind

coldplay.xixi

Libérer： 2020-11-30 15:06:57

original

2919 Les gens l'ont consulté

La différence entre jquery on et bind : 1. La méthode bind ajoute un événement à chaque élément enfant, ce qui affectera les performances, mais pas la méthode on 2. Lorsque bind ajoute dynamiquement des éléments, l'événement ne peut pas ; être lié dynamiquement, et la méthode on le peut.

Quelle est la différence entre jquery et bind

L'environnement d'exploitation de ce tutoriel : Système Windows 7, jquery version 1.10.2 Cette méthode convient à toutes les marques d'ordinateurs.

La différence entre jquery on et bind : méthode

on() Consultez le code source et vous constaterez que les couches inférieures de bind() et delegate() sont implémentés à l'aide de la méthode on() ;

Signature de fonction : bind(type, [data], fn) ,on(type,[selector],[data],fn) .

Par exemple :

<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="add">添加新的p元素</button>
  <p>第一个p元素</p>
  <p>第二个p元素</p>
  <p>第三个p元素</p>
  <p>第四个p元素</p>
  <p>第五个p元素</p>
</div>
<script>
$("#add").click(function(){
  $("div").append("<p>这是一个新的p元素</p>");
});
</script>

Copier après la connexion

Utilisation :

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

Copier après la connexion

Comparaison des avantages et des inconvénients :

Méthode bind() :

Inconvénients :

1. S'il y a trop de sous-éléments, l'ajout d'un événement à chaque sous-élément affectera les performances

2. Lors de l'ajout dynamique d'éléments, les événements ne peuvent pas être effectués ; être lié dynamiquement

Avantages : Pratique pour écrire lors de la liaison d'événements à un seul élément (Ignorer)

Méthode on() :

1. Résolvez les deux lacunes ci-dessus.

2. Utilisez le mécanisme de délégation d'événements, au lieu de lier directement les événements à l'élément p, liez les événements à son élément parent (ou à son élément ancêtre également). au sein du div, l'événement sera déclenché couche par couche. La cible de l'événement bouillonne jusqu'à ce qu'elle atteigne l'élément pour lequel vous avez lié l'événement, et l'événement sera exécuté

3. en appelant. Si la cible de l'événement est très profonde dans l'arborescence DOM, remonter couche par couche pour trouver les éléments correspondant au sélecteur affectera les performances.

Résumé :

1. il y a de nombreux éléments correspondants par le sélecteur, n'utilisez pas bind() pour lier de manière itérative

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

Obligatoire lors de la liaison dynamique. éléments ajoutés, 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. ()