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/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt=""/>
      <a href="http://ipnx.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!