Ereignisse werden verwendet, um auf Benutzerklicks, Tastaturfokus -Links und den Text zu ?ndern. Als ich anfing, JavaScript zu lernen, schrieb ich komplexe Event -H?rer. Vor kurzem habe ich gelernt, wie man die Menge an Code und die Anzahl der Zuh?rer reduziert.

Beginnen wir mit einem einfachen Beispiel: ein paar draggierbare Bl?cke. Wir m?chten dem Benutzer die farbigen Quadrate zeigen, die er gezogen hat.

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>Ziehen Sie einen Block</p>

Intuitiver Ansatz

Als ich anfing, JavaScript -Ereignisse zu lernen, schrieb ich für jedes Element eine separate Ereignish?rerfunktion. Dies ist ein gemeinsames Muster, da es der einfachste Weg ist, loszulegen. Wir m?chten, dass jedes Element ein bestimmtes Verhalten hat, damit wir für jedes Element einen bestimmten Code verwenden k?nnen.

 document.querySelector ('#red'). addEventListener ('DragStart', evt => {
  document.querySelector ('#gezogen'). textContent = 'gezogen rot';
});

document.querySelector ('#Yellow'). AddEventListener ('DragStart', evt => {
  document.querySelector ('#gezogen'). textContent = 'gezogen gelb';
});

Document.querySelector ('#Green'). AddEventListener ('Dragstart', EVT => {
  document.querySelector ('#gezogen'). textContent = 'gezogen grün';
});

Reduzieren Sie den doppelten Code

Die Ereignish?rer in diesem Beispiel sind sehr ?hnlich: Jede Funktion zeigt einen Text an. Dieser doppelte Code kann in eine Helferfunktion zusammengefasst werden.

 Funktion Vorschau (Farbe) {
  document.querySelector ('#gedrückt'). textContent = `schleppte $ {color}`;
}

dokumentieren
  .querySelector ('#red')
  .AdDeVentListener ('DragStart', EVT => Preview ('rot'));
dokumentieren
  .querySelector ('#Yellow')
  .AddeventListener ('DragStart', evt => preview ('gelb');
dokumentieren
  .querySelector ('#Green')
  .AddeventListener ('DragStart', EVT => Preview ('Green'));

Dies ist pr?gnanter, erfordert aber immer noch mehrere Funktionen und Event -H?rer.

Nutzen Sie Ereignisobjekte

Ereignisobjekte sind der Schlüssel zur Vereinfachung der Zuh?rer. Wenn der Ereignish?rer aufgerufen wird, sendet er das Ereignisobjekt auch als erster Parameter. Dieses Objekt enth?lt einige Daten, um das aufgetretene Ereignis zu beschreiben, beispielsweise bei der Ereignis. Um unseren Code zu vereinfachen, k?nnen wir die Eigenschaft evt.currentTarget verwenden, in der currentTarget auf das Element bezieht, das den Ereignish?rer angeschlossen hat. In unserem Beispiel wird es eines von drei farbigen Quadraten sein.

 const preview = evt => {
  const color = evt.currentTarget.id;
  document.querySelector ('#gedrückt'). textContent = `schleppte $ {color}`;
};

document.querySelector ('#red'). addEventListener ('DragStart', Vorschau);
Document.querySelector ('#Yellow'). AddEventListener ('Dragstart', Vorschau);
document.querySelector ('#green'). addEventListener ('Dragstart', Vorschau);

Jetzt gibt es nur eine Funktion anstelle von vier Funktionen. Wir k?nnen genau die gleiche Funktion wie ein Ereignish?rer wiederverwenden, w?hrend evt.currentTarget.id je nach Element, das das Ereignis ausgel?st hat, unterschiedliche Werte aufweist.

Verwenden Sie die Ereignisblase

Die letzte ?nderung besteht darin, die Anzahl der Zeilen im Code zu reduzieren. Anstatt einen Ereignish?rer an jeden Block anzubringen, fügen Sie einen einzelnen Ereignish?rer an ein Element mit, das alle farbigen Bl?cke enth?lt.

Bei Ausl?ser beginnt ein Ereignis mit dem Element (einem der Quadrate) des Ereignisses. Es wird jedoch hier nicht aufh?ren. Der Browser geht zu jedem übergeordneten Element des Elements und ruft jeden Ereignish?rer darauf auf. Dies wird bis zum Stammelement des Dokuments fortgesetzt (in HTML Etikett). Dieser Vorgang wird als "Bubble" bezeichnet, da Ereignisse wie Blasen in den Dokumentbaum aufsteigen. Durch das Anbringen eines Ereignish?rers an das Abschnittselement wird das Fokusereignis vom geschleppten farbigen Quadrat zum übergeordneten Element sprudeln. Wir k?nnen auch die evt.target -Eigenschaft nutzen, die das Element enth?lt, das das Ereignis (eines der Quadrate) anstelle des Elements ausl?st, das den Ereignish?rer ( section ) angeh?ngt hat.

 const preview = evt => {
  const color = evt.target.id;
  document.querySelector ('#gedrückt'). textContent = `schleppte $ {color}`;
};

Document.querySelector ('Abschnitt'). AddEventListener ('Dragstart', Vorschau);

Jetzt haben wir viele Event -H?rer auf nur einen reduziert! Für komplexeren Code funktioniert es besser. Durch die Nutzung von Ereignisobjekten und Bubeln k?nnen wir JavaScript -Ereignisse steuern und den Code der Ereignishandler vereinfachen.

Was ist mit Click -Ereignissen?

evt.target ist sehr effektiv mit Ereignissen wie dragstart und change , bei denen nur wenige Elemente Fokus erhalten oder die Eingabe ?ndern k?nnen.

Normalerweise m?chten wir jedoch auf Klickereignisse anh?ren, damit wir auf den Benutzer reagieren k?nnen, der auf eine Schaltfl?che in der Anwendung klickt. Das Klickereignis wird für jedes Element im Dokument ausgel?st, von einer gro?en Div bis zu einer kleinen Zeitspanne.

Lassen Sie uns unsere draggierbaren farbigen Quadrate in Klickable ?ndern.

<div draggable="true">
    R
  </div>
  <div draggable="true">
    Y
  </div>
  <div draggable="true">
    G
  </div>
<p>Klicken Sie auf ein Quadrat</p>

 const preview = evt => {
  const color = evt.target.id;
  document.querySelector ('#klickte'). textContent = `klickte $ {color}`;
};

document.querySelector ('Abschnitt'). AddEventListener ('Click', Vorschau);

Beachten Sie beim Testen dieses Codes, dass manchmal "Klicken" nicht angeh?ngt ist, nicht beim Klicken auf ein Quadrat. Der Grund, warum es nicht funktioniert, ist, dass jeder Block einen klickbaren enth?lt<span></span> Elemente, nicht draggierbar<div> Element. Da Span keine ID -Set hat, ist die Eigenschaft <code>evt.target.id eine leere Zeichenfolge. Wir kümmern uns nur um die farbigen Quadrate im Code. Wenn wir irgendwo im Quadrat klicken, müssen wir das übergeordnete Quadratelement finden. Wir k?nnen element.closest() verwenden, um das übergeordnete Element zu finden, das dem angeklickten Element am n?chsten liegt.

 const preview = evt => {
  const element = evt.target.closest ('div [draggable]');
  if (element! = null) {
    const color = element.id;
    document.querySelector ('#klickte'). textContent = `klickte $ {color}`;
  }
};

Jetzt k?nnen wir einen einzelnen Listener für Klickereignisse verwenden! Wenn element.closest() NULL zurückgibt, bedeutet dies, dass der Benutzer irgendwo au?erhalb des farbigen Quadrats klickt, und wir sollten das Ereignis ignorieren.

Weitere Beispiele

Hier sind einige andere Beispiele, die zeigen, wie man einen einzelnen Ereignish?rer nutzt.

Liste

Ein gemeinsames Muster ist eine interaktive Liste von Projekten, bei denen neue Projekte mit JavaScript dynamisch eingefügt werden. Wenn wir jedem Projekt einen Ereignish?rer anschlie?en, muss der Code den Ereignish?rer jedes Mal verarbeiten, wenn ein neues Element generiert wird.

<div id="buttons-container"></div>
<button id="add">Fügen Sie eine neue Schaltfl?che hinzu</button>

 Lassen Sie ButtonCounter = 0;
document.querySelector ('#add'). addEventListener ('klick', evt => {
  const newbutton = document.createelement ('button');
  newbutton.textContent = buttonCounter;

  // Erstellen Sie jedes Mal einen neuen Ereignish?rer, wenn Sie auf "Neue Schaltfl?che hinzufügen" klicken.

    // Notieren Sie beim Klicken die Anzahl der Klicken der Schaltfl?che.
    document.querySelector (' #klickte'). textContent = `klickte Schaltfl?che #$ {newbutton.textContent}`;
  });

  Buttoncounter;

  const container = document.querySelector ('#buttons-container');
  Container.AppendChild (Neuling);
});

Durch die Nutzung von Blasen k?nnen wir einen einzelnen Ereignish?rer im Container verwenden. Wenn wir in der Anwendung viele Elemente erstellen, reduziert dies die Anzahl der H?rer von N auf zwei.

 Lassen Sie ButtonCounter = 0;
const container = document.querySelector ('#buttons-container');
document.querySelector ('#add'). addEventListener ('klick', evt => {
  const newbutton = document.createelement ('button');
  newbutton.dataset.number = buttoncounter;
  Buttoncounter;

  Container.AppendChild (Neuling);
});
Container.AdDeVentListener ('Click', evt => {
  const klicktedbutton = evt.target.closest ('Schaltfl?che');
  if (klicktebutton! = null) {
    // Notieren Sie beim Klicken die Anzahl der Klicken der Schaltfl?che.
    document.querySelector (' #klickte'). textContent = `klickte Schaltfl?che #$ {klicktedbutton.dataset.number}`;
  }
});

Bilden

Vielleicht gibt es ein Formular mit vielen Eingaben und wir m?chten alle Benutzerantworten in ein einzelnes Objekt sammeln.

Sei Antworten = {{
  Name: '',
  E -Mail: '',
  Passwort: ''
};

dokumentieren
  .querySelector ('input [name = "name"]')
  .addeventListener ('change', evt => {
    const InputElement = document.querySelector ('input [name = "name"]');
    Antworten.Name = InputElement.Value;
    document.querySelector ('#preview'). textContent = json.stringify (Antworten);
  });
dokumentieren
  .querySelector ('input [name = "E -Mail"]')
  .addeventListener ('change', evt => {
    const InputElement = document.querySelector ('input [name = "E -Mail"]');
    Antworten.Email = InputElement.Value;
    document.querySelector ('#preview'). textContent = json.stringify (Antworten);
  });
dokumentieren
  .querySelector ('input [name = "password"]')
  .addeventListener ('change', evt => {
    const InputElement = document.querySelector ('Eingabe [name = "password"]');
    Antworten.Password = InputElement.Value;
    document.querySelector ('#preview'). textContent = json.stringify (Antworten);
  });

Verwenden wir stattdessen den Elternteil<form></form> Ein einzelner H?rer auf dem Element.

 Sei Antworten = {{
  Name: '',
  E -Mail: '',
  Passwort: ''
};

document.querySelector ('Formular'). AddEventListener ('Change', evt => {
  Antworten [evt.target.name] = evt.target.Value;
  document.querySelector ('#preview'). textContent = json.stringify (Antworten);
});

abschlie?end

Jetzt wissen wir, wie man Ereignisblasen und Ereignisobjekte nutzt, um das komplexe Event -Handler -Chaos auf mehrere zu vereinfachen ... und manchmal sogar auf einen zu reduzieren! Ich hoffe, dieser Artikel hilft Ihnen, über Event -Handler aus einer neuen Perspektive nachzudenken. Ich wei?, dass es für mich eine Offenbarung war, nachdem ich viel Zeit damit verbracht habe, doppelten Code zu schreiben, um dasselbe in meiner Karriere als frühe Entwicklung zu tun.