Introduction à la différence entre les événements de liaison et de liaison en direct dans Jquery

Jquery Il existe trois façons de lier l'événement  : Prenez l'événement click comme exemple

(1) target.click (function(){});

(2) target.bind("click",function(){});

(3) target.live("click",function(){});

La première méthode est facile à comprendre. En fait, elle est similaire à l'utilisation. du JS ordinaire, mais avec moins Un seul sur

Les deuxième et troisième méthodes sont toutes des événements contraignants, mais elles sont très différentes Concentrons-nous sur l'explication de cela, car si vous utilisez Jquery<.>Framework est beaucoup utilisé, vous devez donc porter une attention particulière à la différence entre les deux.

[La différence entre bind et live]

La méthode live est en fait une variante de la méthode bind Sa fonction de base est la même. comme la méthode bind. De la même manière, un événement est lié à un élément, mais la méthode bind ne peut lier les événements qu'aux éléments actuellement existants et n'est pas valide pour les éléments nouvellement générés à l'aide de JS ou d'autres méthodes par la suite. pour compenser les inconvénients de la méthode bind. Ce défaut peut également lier les événements correspondants aux éléments générés ultérieurement. Alors, comment cette fonctionnalité de la méthode live est-elle implémentée ? Discutons ci-dessous de son principe de mise en œuvre.

La raison pour laquelle la méthode live peut également lier les événements correspondants aux éléments générés ultérieurement est attribuée au "Délégué d'événement ". ce qu'on appelle la « délégation d'événement » signifie que les événements liés aux éléments ancêtres peuvent être utilisés sur les éléments descendants. Le mécanisme de traitement de la méthode live consiste à lier l'événement au nœud racine de l'arborescence DOM au lieu de le lier directement à un élément. Donnez un exemple pour illustrer :

   $(".clickMe").live("click",fn);
             $("body").append("<p class=&#39;clickMe&#39;>测试live方法的步骤</p>");

Quand on clique sur ce pour ajouter un element Les étapes suivantes se dérouleront dans l'ordre :

(1) Générer un événement de clic et le transmettre à p pour traitement

(2) Puisqu'il n'y a pas d'événement L'événement est directement lié à p, donc l'événement bouillonne directement vers l'arborescence DOM

(3) L'événement continue de bouillonner jusqu'au nœud racine de l'arborescence DOM. Par défaut, la racine L'événement click

est lié au nœud (4) Exécuter l'événement click lié par live

(5) Détecter la liaison Si l' objet de l'événement existe, détermine si l'événement lié doit continuer à être exécuté. La détection des objets événementiels est obtenue en détectant si $(event.target).closest('.clickMe') peut trouver des éléments correspondants.

(6) Après avoir réussi le test de (5), si l'objet lié à l'événement existe, l'événement lié sera exécuté.

 Puisque la méthode live détectera si l'objet lié à l'événement existe uniquement lorsque l'événement se produit, la méthode live peut implémenter les éléments ajoutés ultérieurement. La liaison d'événement peut également être mis en œuvre. En revanche, bind déterminera si l'élément auquel l'événement est lié existe pendant la phase de liaison de l'événement et se liera uniquement à l'élément actuel, pas au nœud parent.

D'après l'analyse ci-dessus, les avantages du live sont vraiment grands, alors pourquoi devrions-nous utiliser la méthode bind ? La raison pour laquelle jquery conserve la méthode bind au lieu d'utiliser la méthode live pour remplacer bind est que live ne peut pas remplacer complètement bind dans certains cas. Les principales différences

sont les suivantes : (1) La méthode bind peut lier n'importe quel événement JavaScript, tandis que live Dans jQuery 1.3, la méthode ne prend en charge que click, dblclick, keydown, keypress,

keyup,mousedown, mousemove, mouseout, mouseover et mouseup Dans jQuery 1.4.1, même le focus et le bleu sont pris en charge

événement. (mappé sur focusin et focusout qui sont plus appropriés et peuvent bouillonner). De plus, dans jQuery 1.4.1, le survol est également pris en charge (mapping

à "mouseenter mouseleave").

(2) live() ne prend pas entièrement en charge les éléments trouvés via la traversée du DOM. Au lieu de cela, vous devez toujours utiliser la méthode .live()

directement après un sélecteur.

(3) Lorsqu'un élément utilise la méthode live pour lier des événements, si vous souhaitez empêcher l'événement d'être délivré ou de bouillonner, vous devez renvoyer false dans la fonction et simplement appeler

L'utilisation de stopPropagation() ne peut pas empêcher la livraison ou la diffusion d'événements

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!