Das Denken hinter der Vereinfachung von Ereignishandlern

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.

Name:
Post:
Passwort:

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.

Das obige ist der detaillierte Inhalt vonDas Denken hinter der Vereinfachung von Ereignishandlern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!