Que signifie le proxy d'événement jquery ?

Dans jquery, le proxy d'événement signifie lier un événement à un élément parent et attendre que l'événement bouillonne vers l'élément via le DOM avant de l'exécuter. Le proxy d'événement utilise le principe du bouillonnement d'événements pour ajouter des événements au parent en déterminant la source ; de l'événement et en effectuant des opérations sur les sous-éléments correspondants, le nombre de liaisons d'événements peut être considérablement réduit et les performances améliorées.

L'environnement d'exploitation de ce tutoriel : système Windows 10, jquery version 3.6.0, ordinateur Dell G3.

Quelle est la signification du proxy d'événement jquery

Dans jQuery, proxy d'événement signifie : lier l'événement à l'élément parent, puis attendre que l'événement bouillonne vers l'élément via le DOM avant de l'exécuter.

Le proxy d'événement utilise le principe du bouillonnement d'événement (le bouillonnement d'événement signifie que l'événement sera transmis niveau par niveau à son parent), ajoute l'événement au parent et exécute l'opération correspondante de l'élément enfant en jugeant la source de l'événement. , le proxy d'événement peut d'abord réduire considérablement le nombre de liaisons d'événements et améliorer les performances ; deuxièmement, il peut permettre aux sous-éléments nouvellement ajoutés d'avoir les mêmes opérations ;

Il existe deux manières de déclencher des événements pendant l'écoute d'un événement : la capture d'événement et le bouillonnement d'événement. Les événements se déroulent plus rapidement et plus efficacement.

Capture d'événements : les événements sont transmis aux éléments descendants du DOM.

Événement bouillonnant : les événements bouillonnent dans le DOM à partir de l'élément source où l'événement s'est produit.

jQuery utilise le bouillonnement d'événements pour gérer tous les événements. La bibliothèque jQuery fournit trois méthodes pour lier les fonctions de gestion d'événements des éléments, à savoir bind(), live() et délégué().

1. Utilisez .bind() pour lier la fonction de traitement d'événements : deux paramètres doivent être fournis, le premier est le type d'événement et le second est la fonction de traitement d'événements.

.bind(event type, event handle)

Par exemple : la méthode

$(document).ready(function(){
　　$(".selector").bind("click",alertMe);
function alertMe(){
　　alert("Hello world!");
}
});

.bind() ne convient que pour lier des gestionnaires d'événements à des éléments qui existent déjà dans le DOM. Cela n'a aucun effet sur les éléments DOM ajoutés ultérieurement lors du passage dans le script d'action.

Imaginez : il y a un élément .box dans le DOM. Vous souhaitez un lien pour copier cet élément à chaque fois que vous cliquez dessus et l'ajouter au DOM. Tout d’abord, nous pouvons lier un gestionnaire d’événements de clic approprié à ce lien. Chaque fois que vous cliquez sur ce lien, la méthode .clone() sera appelée une fois, copiant l'élément box et l'ajoutant au conteneur correspondant :

$(document).ready(function(){
    $('.box').bind('click',function(){
        $(this).clone().appendTo('.container');        
    });
});
<div class="container">
    <div class="box">click me</div>
</div>

Exécutez dans le navigateur, et le résultat est que lorsque vous cliquez sur ce lien, le L'élément sera ajouté. Mais en cliquant sur un élément autre que le premier lien, l'événement click ne sera pas exécuté.

Donc : l'événement click lié ne peut pas agir sur ces nouveaux éléments qui viennent d'être ajoutés au DOM. Seuls les éléments qui existent dans le DOM au moment de la liaison de l'événement lieront avec succès l'événement de clic. L'événement click n'est lié qu'au premier élément, donc bien que le premier élément puisse être cloné en continu, aucun des éléments clonés ne peut être affecté par l'événement click. Si vous souhaitez que cet élément cloné soit affecté par les événements de clic, vous pouvez utiliser la liaison .live().

2. Utilisez .live() pour lier les fonctions de gestion des événements

.live() fournit un moyen assez flexible de capturer des événements. Son utilisation est très similaire à .bind(). La seule différence est que la méthode .live() fonctionne non seulement sur les éléments qui existent actuellement dans le DOM, mais également sur les éléments qui pourraient exister dans le futur (générés dynamiquement).

.live(type d'événement, descripteur d'événement)

Modifiez l'exemple ci-dessus :

$(document).ready(function(){
    $('.box').live('click',function(){
        $(this).clone().appendTo('.container');        
    });
});
<div class="container">
    <div class="box">click me</div>
</div>

3. Utilisez .delegate() pour lier la fonction de traitement d'événement

.delegate(sélecteur, type d'événement, gestionnaire d'événement)

Modifier l'exemple ci-dessus :

<script type="text/javascript">
  
  $(document).ready(function(){
        $(&#39;.container&#39;).delegate(&#39;.box&#39;,&#39;click&#39;,function(){
            $(this).clone().appendTo(&#39;.container:first&#39;);        
        });
    });    
  </script>
  <body>
    <div class="container">
        <div class="box">click me</div>
    </div>
    <div class="container">
        <div class="box">click me</div>
    </div>
    <div class="container">
        <div class="box">click me</div>
    </div>
  </body>

L'effet d'exécution est le même que l'utilisation de .live() pour lier la fonction de gestionnaire d'événements. Mais utiliser .delegate() pour lier les fonctions de gestion d’événements est plus efficace que d’utiliser .live(). Une partie du code source de la bibliothèque jQuery concernant la liaison

bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
        return this.off( types, null, fn );
    },
    live: function( types, data, fn ) {
        alert(this.context); //添加一行
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },
    die: function( types, fn ) {
        jQuery( this.context ).off( types, this.selector || "**", fn );
        return this;
    },
    delegate: function( selector, types, data, fn ) {
        alert(this); //添加一行
        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 );
    },

ajoute respectivement une ligne aux méthodes live et délégué. Une fois le navigateur exécuté, utilisez .live() et le document apparaîtra. .live() pour lier l'événement. La source est un document. En utilisant .delegate(), l'objet apparaît, c'est-à-dire en utilisant .delegate() pour lier l'événement, sa source est l'élément lié spécifique. Par conséquent, utiliser .delegate() est plus efficace que .live().

Comme le montre le code source, utilisez .bind() pour lier la fonction de traitement d'événement et utilisez unbind() pour annuler la liaison d'événement.

　　　　 Utilisez .live() pour lier les fonctions de traitement d'événements, et vous pouvez utiliser die() pour annuler la liaison d'événements. Utilisez .delegate() pour lier la fonction de traitement d'événement, et vous pouvez utiliser undelegate() pour annuler la liaison d'événement.

Recommandation de didacticiel vidéo :

Tutoriel vidéo jQuery

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!