Event -Delegation mit JQuery

Kernpunkte

• Ereignisdelegierte in JQuery sind eine Technik zum Anbringen eines einzelnen Ereignishandlers an ein übergeordnetes Element anstelle mehrerer Handler, die an einzelne Elemente angeschlossen sind, wodurch die Speicherverwendung verringert und die Leistung verbessert wird.
• JQuery -Funktion on() kann zum Implementieren von Ereignisdelegierungen verwendet werden, und der optionale zweite Parameter gibt den Selektor für den Delegierten -Ereignis -Handler an. Verwenden Sie dann das Attribut event.target, um zu identifizieren, welches Element das Ereignis ausgelöst hat.
• In dynamischen Anwendungen werden häufig Elemente hinzugefügt oder entfernt, und Ereignisdelegierte sind besonders nützlich, da dies die Notwendigkeit beseitigt, Ereignisse manuell zu verwalten und die Codekomplexität zu verringern. Es ist jedoch zu beachten, dass der Sub-Event-Handler vor dem Delegieren des Ereignishandlers verarbeitet und das Ereignis daran hindert, sich zu vermehren.

jQuery vereinfacht die Ereignisbehandlung in JavaScript. Je mehr Ereignishandler definiert sind, desto mehr Speicher wird verwendet, was schließlich zu einer Leistungsverschlechterung und zu einer Verlangsamung der Benutzeroberfläche führen wird. In diesem Artikel wird untersucht, wie Event -Delegierte dazu beitragen können, dies zu verhindern, und wie Event -Delegierte in JQuery angewendet werden können. Ereignisdelegierte sind eine Ereignisverarbeitungstechnik, die anstatt einen Ereignishandler direkt an jedes Element anzuhängen, das für ein Ereignis zu hören ist, einen einzigen Ereignis -Handler an das übergeordnete Element dieser Elemente angehängt, um auf seinen Kinderelementen zu hören. Überprüfen Sie bei der Bearbeitung eines Ereignisses, welches Element das Ereignis auslöst und entsprechend reagiert. Ereignisdelegierte sind von Ereignisblasen im DOM abhängig. Dies ist der Prozess der Ereignisse, die bei Kindern ausgelöst werden, die sich bis zum Dom -Baum zu seinem übergeordneten Element und seinem übergeordneten Element usw. ausbreiten, bis es das Dokument erreicht. Programmierer können event.stopPropagation() verwenden, um zu sprudeln. Beachten Sie, dass sich nicht alle DOM -Ereignisse ausbreiten - Fokus, Unschärfe, Last und Entladen nicht. Ereignisdelegierte verwenden weniger Speicher, da Sie mehrere Ereignishandler durch einen einzelnen Ereignishandler ersetzen. Wenn Sie beispielsweise einen Ereignishandler an jeden Link in der Liste von zehn Links anschließen, werden zehn Ereignishandler vorliegen. Wenn Sie stattdessen Ereignisdelegierte verwenden und Ereignisse im übergeordneten Element verarbeiten, wird nur ein Ereignishandler erstellt und weniger Speicher wird verwendet als der Speicher, der an jedem Link separat angehängt ist. Neben der Reduzierung des Speicherverbrauchs hat die Ereignisdelegation auch die folgenden Vorteile:

• Sie müssen Ereignisse nicht manuell verwalten, wenn Elemente zu Elementen hinzufügen oder Elemente von DOM entfernen. Wenn wir die traditionelle Ereignisbehandlung verwenden, müssen wir den Ereignishandler an das dem DOM hinzugefügte Element anschließen und den Ereignishandler aus dem vom DOM entfernten Element entfernen.
• Reduzieren Sie den Code, der mit weniger Event -Handlern verwaltet wird. Dies kann unseren Code ohne eine doppelte Ereignisbehandlungslogik vereinfachen, die dazu beiträgt, dass unser JavaScript präzise und trocken bleibt.

Beispiel für die Ereignisdelegation in jQuery

Angenommen, Sie entwickeln eine einseitige Anwendung, die Kätzchenbilder verkauft. Wenn die Seite geladen wird, werden die Top 20 Kätzchen angezeigt. Wenn der Benutzer auf der Seite scrollt, werden mehr Kätzchen geladen. Unsere HTML sieht so aus:

<div id="cats">
  <ul>
    <li>
      <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt=""/>
      <a href="https://www.php.cn/link/207f170979dd72ff5776e20d07c28732">More info</a>
      <button>Add to cart</button>
    </li>
    ...
  </ul>
</div>

Verwenden der traditionellen Ereignisbehandlung müssen wir den Event -Handler mit:

verbinden

1. Ein größeres Bild wird angezeigt, wenn der Benutzer auf das Miniaturbild klickt.
2. Weitere Informationen werden angezeigt, wenn der Benutzer auf den Link "Weitere Informationen" klickt.
3. fügen Sie das Bild dem Wagen hinzu, wenn der Benutzer klickt "zum Warenkorb hinzufügen".
4. Fügen Sie diese drei Ereignisse an das neue DOM -Element hinzu, das hinzugefügt wurde, wenn der Benutzer auf der Seite scrollt.

Dieser Code ähnelt dem folgenden Beispiel. Beachten Sie, dass dies zeigen soll, wie die Anhänge eines Ereignishandlers an einzelne Elemente von der Verwendung von Ereignisdelegierten unterscheidet. Daher wird keine Implementierung für die Funktionen loadImage(), moreInfo(), addToCart() und loadNewKittens() vorgesehen.

$(document).ready(function() {
  var cats = $('#cats');

  cats.find('img')
    .on('click', function() {
      loadImage();
    })

  cats.find('a')
    .on('click', function(event) {
      event.preventDefault();
      moreInfo();
    });

  cats.find('button')
    .on('click', function() {
      addToCart();
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    // 为新的DOM元素附加事件处理程序
    fragment.find('img')
      .on('click', function() {
        loadImage();
      });

    fragment.find('a')
      .on('click', function(event) {
        event.preventDefault();
        moreInfo();
      });

    fragment.find('button')
      .on('click', function() {
        addToCart();
      });

    fragment.appendTo('#cats ul');
  });
});

Das Codevolumen ist ziemlich groß. Lassen Sie uns nun sehen, wie unser Code aussieht, wenn wir Event -Delegierte verwenden:

$(document).ready(function() {
  $('#cats')
    .on('click', 'img, a, button', function(event) {
      event.preventDefault();
      var target = event.target;

      switch(target.tagName.toLowerCase()) {
        case 'img':
          loadImage();
          break;
        case 'a':
          moreInfo();
          break;
        case 'button':
          addToCart();
          break;
        default:
          // 什么也不做
      }
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    fragment.appendTo('#cats ul');
  });
});

Der Schlüssel liegt im optionalen zweiten Parameter von on(). Durch die Übergabe des Selektors hier weiß on(), dass er den Delegierten -Ereignis -Handler anstelle des direkt gebundenen Ereignishandlers bearbeitet. Unser Event -Device -Code ist jetzt viel einfacher. Durch das Erhalten von event.target und das Schalten basierend auf seiner tagName können wir bestimmen, welches Element das Ereignis ausgelöst und entsprechend reagiert. Darüber hinaus müssen wir Ereignishandler nicht mehr an Elemente anhängen, die in $(window).scroll geladen sind, da Ereignisse, die durch diese neuen Elemente ausgelöst werden, an das übergeordnete Element delegiert werden. Eine potenzielle "Falle", die bei der Verwendung von Ereignisdelegierten beachtet werden muss, ist, dass jeder an ein untergeordnete Element angeschlossene Ereignishandler behandelt wird, bevor der Delegierte Event -Handler ausgelöst wird. Daher kann der Sub-Event-Handler oder zurückgeben event.stopPropagation(), wodurch verhindert wird, dass das Ereignis in den Delegierten-Event-Handler sprudelt und Sie verwirrt darüber, warum Ihr Ereignis nicht delegiert wird. false

Schlussfolgerung

In diesem Artikel studieren wir Event -Delegation. Wir haben gesehen, wie es dazu beitragen kann, die Leistung einer Website zu verbessern, indem die Ereignisverarbeitungslast reduziert wird, die sie tragen muss. Wir haben auch gesehen, wie Ereignisdelegierter in JQuery durch die

-Funktion implementiert werden. on()

Häufig gestellte Fragen zur Jquery -Ereignis -Delegation

Was ist Event -Delegierter in JQuery und warum ist es wichtig?

Ereignisdelegierte in JQuery sind eine Technik, mit der Sie dem übergeordneten Element einen einzelnen Ereignishörer anhängen können, das für alle Nachkommen von passenden Selektoren abfeuert, unabhängig davon, ob diese Nachkommen jetzt existieren oder in Zukunft hinzugefügt werden. Dies ist wichtig, da es die Leistung erheblich verbessern kann, indem die Anzahl der von der Anwendung erforderlichen Ereignishandler reduziert werden. Anstatt einzelne Ereignishandler an jedes Element anzuhängen, können Sie Ereignisse an übergeordnete Elemente delegieren. Dies ist insbesondere in dynamischen Anwendungen nützlich, bei denen Elemente dynamisch hinzugefügt oder entfernt werden.

Wie funktioniert Event -Delegation in JQuery?

Ereignisdelegierte in JQuery nutzen die Tatsache, dass die meisten JQuery -Ereignisse auf den Dom -Baum sprudeln oder sich ausbreiten. Wenn ein Ereignis auf ein untergeordnetes Element abgefeuert wird, sprudelt es zu seinem übergeordneten Element. Durch das Anbringen eines Ereignishörers an das übergeordnete Element können Sie Ereignisse erfassen, die auf einem seiner Kinderelemente ausgelöst werden. Das event.target -Merkmal kann verwendet werden, um zu bestimmen, welches untergeordnete Element das Ereignis ausgelöst hat.

Was ist der Unterschied zwischen direkten Ereignissen und delegierten Ereignissen in JQuery?

direkte Ereignisse sind direkt an bestimmte Elemente angeschlossen, und nur diese Elemente können Ereignisse auslösen. Andererseits werden Delegierereignisse an das übergeordnete Element angehängt, und jedes untergeordnete Element kann Ereignisse auslösen. Der Vorteil von Delegierereignissen besteht darin, dass sie Ereignisse dynamisch hinzugefügter Kinderelemente behandeln können.

Wie kann ich die Methode .on() verwenden, um eine Ereignisdelegation in JQuery durchzuführen?

Die .on() -Methode in JQuery wird zum Anbringen von Ereignishandlern verwendet. Für Ereignisdelegierte verwenden Sie drei Parameter: Ereignisart, Selektorzeichenfolge, die zum Filtern von Nachkommen und Handlerfunktionen verwendet werden. Ein Ereignistyp ist eine Zeichenfolge, die den Ereignistyp darstellt (z. B. "Klicken"), eine Selektorzeichenfolge, um Nachkommen des ausgewählten Elements zu filtern, das das Ereignis auslöst, und eine Handler -Funktion ist eine Funktion, die ausgeführt wird, wenn das Ereignis ist ausgelöst.

Kann ich Event -Delegierter verwenden, um dynamisch hinzugefügte Elemente in JQuery zu verarbeiten?

Ja, einer der Hauptvorteile von Ereignisdelegierten in JQuery besteht darin, dass er Ereignisse von Elementen verarbeiten kann, die dynamisch hinzugefügt werden. Da der Ereignishörer dem übergeordneten Element angeschlossen ist, kann er Ereignisse erfassen, die auf einem seiner Kinderelemente ausgelöst werden, auch wenn diese Ereignisse nach dem Anhängen des Ereignishörers hinzugefügt werden.

Was ist Event Blase und was hat es mit Event -Delegation in JQuery zu tun?

Ereignisblase ist ein Ereignisausbreitungstyp, bei dem ein Ereignis mit dem spezifischen Element beginnt, das sie auslöst und dann zu seinen Vorfahren sprudelt. Ereignisdelegierte in JQuery verwenden Ereignisblasen, um Ereignishörer an Elternelemente anzuhängen. Wenn ein Ereignis auf ein untergeordnetes Element abgefeuert wird, sprudelt es zum übergeordneten Element, wo der Ereignishörer es erfassen kann.

Wie kann man die Ereignisverbreitung in JQuery stoppen?

Sie können die Methode .stopPropagation() verwenden, um die Ereignisausbreitung in JQuery zu stoppen. Diese Methode verhindert, dass Ereignisse in den DOM -Baum sprudeln und verhindern, dass ein Elternhandler Ereignisbenachrichtigungen empfängt. Sie sollten es jedoch mit Vorsicht verwenden, da Ihr Code schwieriger zu debuggen und zu verstehen wird.

Was ist der Unterschied zwischen

und .bind() Methoden, die für die Ereignisverarbeitung in JQuery verwendet werden? .on()

Die

-Methode in jQuery wird verwendet, um einen Ereignishandler direkt an ein Element anzubringen. Andererseits kann die .bind() -Methode verwendet werden, um einen Ereignishandler direkt an ein Element (z. B. .on()) oder an ein übergeordnetes Element für das Ereignisdelegieren anzuhängen. Die .bind() -Methode ist allgemeiner und die bevorzugte Methode zum Anbringen von Ereignishandlern in JQuery. .on()

Kann ich Event -Delegierter verwenden, um benutzerdefinierte Ereignisse in JQuery zu verarbeiten?

Ja, Sie können Event -Delegate verwenden, um benutzerdefinierte Ereignisse in JQuery zu verarbeiten. Wie bei Standard -Ereignissen können Sie einen Ereignishörer an ein übergeordnetes Element anhängen, das benutzerdefinierte Ereignisse erfasst, die bei jedem seiner Kinder ausgelöst werden.

Wie lösche ich Event -Handler in JQuery?

Mit der Methode .off() können Sie den Ereignishandler in JQuery löschen. Diese Methode kann verwendet werden, um alle Ereignishandler in einem Element zu löschen oder nur Ereignishandler mit einem bestimmten Ereignisart oder Namespace zu löschen.

Das obige ist der detaillierte Inhalt vonEvent -Delegation mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!