Lernen Sie die Event-Delegation in JavaScript wie Sie sind 5

Das Anhängen eines einzelnen Ereignis-Listeners an ein übergeordnetes Element, anstatt jedem untergeordneten Element separate Listener hinzuzufügen, ist die Technik, die als Ereignisdelegation bekannt ist. Dies funktioniert aufgrund des Ereignis-Bubblings, bei dem ein Ereignis (wie ein Klick) im DOM-Baum vom untergeordneten zum übergeordneten Element nach oben wandert. Durch die Verarbeitung von Ereignissen auf übergeordneter Ebene können Sie Speicherplatz sparen und die Leistung verbessern, insbesondere wenn Sie mit vielen untergeordneten Elementen oder Elementen arbeiten, die dynamisch hinzugefügt werden.

Wie funktioniert es?

Wenn ein Ereignis auf einem untergeordneten Element ausgelöst wird (z. B. ein Klick), hört es hier nicht auf. Das Ereignis sprudelt zu seinem übergeordneten Element usw. im DOM-Baum nach oben, bis es das Dokumentstammverzeichnis erreicht. Die Ereignisdelegierung macht sich dies zunutze, indem sie den Ereignis-Listener auf einem gemeinsamen Vorfahren aller untergeordneten Zielelemente platziert. Dieser Vorfahr wartet auf Ereignisse, die aus den untergeordneten Elementen hervorgehen, und verarbeitet sie basierend auf bestimmten Bedingungen, z. B. der Art des Ereignisses oder dem spezifischen untergeordneten Element, das das Ereignis ausgelöst hat.

Beispiel für eine Ereignisdelegation

Angenommen, wir haben eine Liste mit Schaltflächen und möchten für jede Schaltfläche ein Klickereignis verarbeiten. Anstatt jeder Schaltfläche einen Klickereignis-Listener hinzuzufügen, können wir dem übergeordneten Element einen einzelnen Listener hinzufügen.

<ul id="buttonList">
  <li><button data-action="delete">Delete</button></li>
  <li><button data-action="edit">Edit</button></li>
  <li><button data-action="view">View</button></li>
</ul>

Anstatt jetzt jeder Schaltfläche einen Klick-Ereignis-Listener hinzuzufügen, hängen wir einen einzelnen Listener an die übergeordnete

-Schaltfläche an. Element.


document.getElementById("buttonList").addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const action = event.target.getAttribute("data-action");

    if (action === "delete") {
      console.log("Deleting item...");
    } else if (action === "edit") {
      console.log("Editing item...");
    } else if (action === "view") {
      console.log("Viewing item...");
    }
  }
});

Nach dem Login kopieren

Der Click-Event-Listener ist an den

angehängt. Element (das übergeordnete Element). Innerhalb des Event-Handlers prüfen wir mithilfe von event.target.tagName === „BUTTON“, ob das angeklickte Element eine Schaltfläche ist. Dadurch wird sichergestellt, dass wir nur auf Schaltflächenklicks reagieren. Wir verwenden das data-action-Attribut, um die auszuführende Aktion zu bestimmen (Löschen, Bearbeiten oder Anzeigen). Dieser Ansatz ist effizienter und skalierbarer, insbesondere wenn wir viele Schaltflächen haben oder dynamisch neue hinzufügen.

Ein weiteres Beispiel mit dynamischen Elementen

Wenn die Liste der Schaltflächen dynamisch generiert würde (z. B. durch Hinzufügen neuer Schaltflächen über JavaScript), würde die Ereignisdelegierung immer noch einwandfrei funktionieren, ohne dass Ereignis-Listener erneut angehängt werden müssten.


const ul = document.getElementById("buttonList");

// Dynamically adding new buttons
const newButton = document.createElement("li");
newButton.innerHTML = '<button data-action="share">Share</button>';
ul.appendChild(newButton);

// The same event listener on the parent will handle the new button
ul.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    const action = event.target.getAttribute("data-action");
    console.log(action + " button clicked.");
  }
});

Nach dem Login kopieren

Ereignis-Bubbling: Die Ereignisdelegation funktioniert aufgrund des Ereignis-Bubblings, bei dem ein auf einem untergeordneten Element ausgelöstes Ereignis an seine Vorgänger weitergegeben wird.

Effizient für dynamische Inhalte: Da wir den Ereignis-Listener an das übergeordnete Element anhängen, funktioniert er für Elemente, die später dem DOM hinzugefügt werden.

Leistung: Reduziert den Aufwand für das Anhängen und Verwalten mehrerer Ereignis-Listener, insbesondere bei einer großen Anzahl untergeordneter Elemente.

Die Ereignisdelegation ist eine wesentliche Technik für die effiziente DOM-Ereignisbehandlung, insbesondere wenn es um viele Elemente oder dynamische Inhalte geht.

Das obige ist der detaillierte Inhalt vonLernen Sie die Event-Delegation in JavaScript wie Sie sind 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!