Was bedeutet JQuery-Ereignis-Proxy?

In jquery bedeutet Ereignis-Proxy, ein Ereignis an ein übergeordnetes Element zu binden und darauf zu warten, dass das Ereignis über das DOM an das Element gesendet wird, bevor es ausgeführt wird. Der Ereignis-Proxy verwendet das Prinzip der Ereignis-Bubbling, um Ereignisse zum übergeordneten Element hinzuzufügen des Ereignisses und das Durchführen von Operationen an den entsprechenden Unterelementen kann die Anzahl der Ereignisbindungen erheblich reduziert und die Leistung verbessert werden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JQuery-Version 3.6.0, Dell G3-Computer.

Was bedeutet der JQuery-Ereignis-Proxy?

In jQuery bedeutet Ereignis-Proxy: Binden des Ereignisses an das übergeordnete Element und Warten, bis das Ereignis über das DOM an das Element gesendet wird, bevor es ausgeführt wird.

Der Ereignis-Proxy verwendet das Prinzip des Ereignis-Bubblings (Ereignis-Bubbling bedeutet, dass das Ereignis Ebene für Ebene an sein übergeordnetes Element übergeben wird), fügt das Ereignis dem übergeordneten Element hinzu und führt die entsprechende Operation des untergeordneten Elements aus, indem er die Quelle beurteilt Der Ereignis-Proxy kann erstens die Anzahl der Ereignisbindungen erheblich reduzieren und die Leistung verbessern. Zweitens kann er ermöglichen, dass neu hinzugefügte Unterelemente dieselben Operationen ausführen.

Es gibt zwei Möglichkeiten, Ereignisse beim Abhören von Ereignissen auszulösen: Ereigniserfassung und Ereignis-Bubbling. Ereignisse sprudeln schneller und effizienter.

Ereigniserfassung: Ereignisse werden an untergeordnete Elemente im DOM weitergeleitet.

Ereignis-Bubbling: Ereignisse sprudeln durch das DOM von dem Quellelement aus, in dem das Ereignis aufgetreten ist.

jQuery verwendet Event-Bubbling, um alle Ereignisse zu verarbeiten. Die jQuery-Bibliothek bietet drei Methoden zum Binden von Ereignisverarbeitungsfunktionen von Elementen, nämlich bind(), live() und Delegate().

1. Verwenden Sie .bind(), um die Ereignisverarbeitungsfunktion zu binden: Es müssen zwei Parameter bereitgestellt werden, der erste ist der Ereignistyp und der zweite ist die Ereignisverarbeitungsfunktion.

.bind(Ereignistyp, Ereignishandle)

Zum Beispiel: Die Methode

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

.bind() eignet sich nur zum Binden von Ereignishandlern an Elemente, die bereits im DOM vorhanden sind. Dies hat keine Auswirkungen auf DOM-Elemente, die später beim Durchlaufen des Aktionsskripts hinzugefügt werden.

Stellen Sie sich vor: Es gibt ein .box-Element im DOM. Sie möchten, dass ein Link dieses Element bei jedem Klick kopiert und dem DOM hinzufügt. Zunächst können wir einen geeigneten Click-Event-Handler an diesen Link binden. Jedes Mal, wenn auf diesen Link geklickt wird, wird die .clone()-Methode einmal aufgerufen, das Box-Element kopiert und an den entsprechenden Container angehängt:

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

Führen Sie den Browser aus, und das Ergebnis ist, dass beim Klicken auf diesen Link die Element wird angehängt. Wenn Sie jedoch auf ein anderes Element als den ersten Link klicken, wird das Klickereignis nicht ausgeführt.

Also: Das gebundene Klickereignis kann nicht auf diese neuen Elemente reagieren, die gerade zum DOM hinzugefügt wurden. Nur Elemente, die zum Zeitpunkt der Bindung des Ereignisses im DOM vorhanden sind, binden das Klickereignis erfolgreich. Das Klickereignis ist nur an das erste Element gebunden. Obwohl das erste Element kontinuierlich geklont werden kann, kann keines der geklonten Elemente vom Klickereignis betroffen sein. Wenn Sie möchten, dass dieses geklonte Element von Klickereignissen beeinflusst wird, können Sie die Bindung .live() verwenden.

2. Verwenden Sie .live(), um Ereignisverarbeitungsfunktionen zu binden.

.live() bietet eine sehr flexible Möglichkeit, Ereignisse zu erfassen. Seine Verwendung ist der von .bind() sehr ähnlich. Der einzige Unterschied besteht darin, dass die Methode .live() nicht nur auf Elemente funktioniert, die derzeit im DOM vorhanden sind, sondern auch auf Elemente, die möglicherweise in der Zukunft existieren (dynamisch generiert).

.live(Ereignistyp, Ereignishandle)

Ändern Sie das obige Beispiel:

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

3. Verwenden Sie .delegate(), um die Ereignisverarbeitungsfunktion zu binden

.delegate(Selektor, Ereignistyp, Ereignishandler)

Ändern das obige Beispiel:

<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>

Der Ausführungseffekt ist der gleiche wie die Verwendung von .live() zum Binden der Event-Handler-Funktion. Die Verwendung von .delegate() zum Binden von Ereignisbehandlungsfunktionen ist jedoch effizienter als die Verwendung von .live(). Ein Teil des Quellcodes der jQuery-Bibliothek zur Bindung

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 );
    },

fügt den Live- und Delegate-Methoden jeweils eine Zeile hinzu. Verwenden Sie .live(), und das Dokument wird angezeigt, was bedeutet, dass .live( ) wird zum Binden des Ereignisses verwendet. Die Quelle ist document. Wenn Sie .delegate () verwenden, wird das Objekt angezeigt. Wenn Sie also .delegate () zum Binden des Ereignisses verwenden, ist seine Quelle das spezifisch gebundene Element. Daher ist die Verwendung von .delegate() effizienter als die Verwendung von .live().

Aus dem Quellcode geht hervor, dass Sie .bind() verwenden, um die Ereignisverarbeitungsfunktion zu binden, und Sie können unbind() verwenden, um die Ereignisbindung abzubrechen.

　　　　 Verwenden Sie .live(), um Ereignisverarbeitungsfunktionen zu binden, und Sie können die() verwenden, um die Ereignisbindung abzubrechen.

　　　　　　　　　　　　　　　　　　　　　　　　 Verwenden Sie .delegate(), um die Ereignisverarbeitungsfunktion zu binden, und Sie können undelegate() verwenden, um die Ereignisbindung abzubrechen.

Video-Tutorial-Empfehlung: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas bedeutet JQuery-Ereignis-Proxy?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!