Maison > Article > interface Web > Quelle est la différence entre jquery et bind
Quelle est la différence entre jquery et bind
- coldplay.xixioriginal
- 2020-11-25 16:29:092838parcourir
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.
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>Utilisation :
$('div p').bind('click',function(){
alert($(this).text());
})
$("div").on("click","p",function(){
alert($(this).text());
})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. ()
Recommandations d'apprentissage gratuites associées : javascript (vidéo)
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!