Maison  >  Article  >  interface Web  >  Quelle est la différence entre bind et on dans jquery

Quelle est la différence entre bind et on dans jquery

王林
王林original
2020-11-26 13:46:353756parcourir

La différence entre bind et on dans jquery est la suivante : on contraignant a un paramètre childSelector de plus que la liaison bind. bind ne peut ajouter des événements qu'à l'élément lui-même qui remplit les conditions, et on peut déléguer les événements des éléments enfants à l'élément parent pour traitement.

Quelle est la différence entre bind et on dans jquery

Environnement :

Cet article s'applique à toutes les marques d'ordinateurs.

(Tutoriel recommandé : Tutoriel vidéo jquery )

Analyse des différences :

bind et on sont tous deux utilisés pour les événements de liaison d'éléments, et leur valeur maximale la différence est que les événements bouillonnent.

Le bouillonnement d'événements est également le prototype des événements délégués. La délégation d'événements consiste à confier des éléments d'une sous-classe à la classe parent. La différence la plus intuitive est que la liaison a un paramètre « childSelector » de plus que la liaison de liaison.

Syntaxe :

$(selector).on(event,childSelector,data,function)

Paramètres :

Quelle est la différence entre bind et on dans jquery

$(selector).bind(event,data,function,map)

Paramètres :

Quelle est la différence entre bind et on dans jquery

bind ne peut ajouter des événements qu'aux éléments eux-mêmes qui remplissent les conditions, tandis que on peut déléguer les événements des éléments enfants aux éléments parents pour traitement, et peut ajouter des événements de liaison aux éléments ajoutés dynamiquement

, c'est-à-dire pour les éléments nouvellement ajoutés. elements Si l'élément est lié, les nouveaux éléments qui remplissent les conditions seront également liés à l'événement. S'il est lié, cela n'affectera pas le nouvel élément.

Exemple :

<ul>
    <li>第一个子元素<li/>
    <li>第二个子元素<li/>
    <li>第三个子元素<li/>
</ul>

Nous souhaitons ajouter des événements de clic à tous les li. Vous pouvez utiliser sur :

 $(&#39;ul&#39;).on(&#39;click&#39;,&#39;li&#39;, function () {   
        console.log($(this).text());
});

ou lier :

 $(&#39;ul li&#39;).bind(&#39;click&#39;, function () { 
        console.log($(this).text());
});

. Différence :

La première liaison avec on la délègue en fait au parent ul, c'est-à-dire que l'événement n'est lié qu'à un seul élément

La seconde utilise le sélecteur pour sélectionner ul Tous les éléments li sous sont liés aux événements dans l'ordre

S'il y a de très nombreux sous-éléments, la différence sera énorme et la liaison affectera sérieusement les performances !

Si un nouveau li est ajouté à ce stade time :

$(&#39;ul&#39;).append(&#39;<li>第四个子元素<li>&#39;);

S'il est lié par on, ce li aura également un événement de clic ; s'il est lié, il n'y aura pas d'événement de clic ;

Recommandations associées : Tutoriel js

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn