DOM Events machen eine Webseite interaktiv. Durch die Verwendung von DOM-Ereignissen wird eine Seite angeklickt oder ein Formular gesendet. Dadurch können Entwickler ein ansprechendes Benutzererlebnis schaffen.

Einige Beispiele für DOM-Ereignisse sind, wenn ein Benutzer mit der Maus klickt, wenn eine Webseite geladen wurde, wenn ein Bild geladen wurde, wenn ein HTML-Formular gesendet wurde und wenn ein Benutzer eine Taste drückt.

In diesem Artikel werden wir Schlüsselkonzepte in DOM-Ereignissen vereinfachen und untersuchen, wie man damit umgeht.

1. EventListener hinzufügen

addEventListener fügt einen Event-Handler an Elemente an und ermöglicht es Ihnen zu definieren, wie das Element auf die Interaktion des Benutzers mit der Seite reagiert.

Beispiel: Der folgende Code fügt ein „Klick“-Ereignis hinzu, um die Cocktaildetails anzuzeigen, wenn auf das Bild geklickt wird.

`img.addEventListener('click', () => handleClick(cocktail));`

2. querySelector

querySelector können Sie ein Element mithilfe von CSS-ähnlichen Selektoren auswählen. Dies ist eine der vielseitigsten Möglichkeiten, Elemente gezielt anzusprechen.

Beispiel: Dieser Code erstellt einen reduzierbaren Abschnitt auf der Webseite. document.querySelectorAll wählt alle h3-Elemente auf der Webseite aus und gibt eine NodeList aller übereinstimmenden Elemente zurück.

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById und getElementsByClassName

getElementById zielt auf ein einzelnes Element anhand seiner eindeutigen ID ab.

Ähnlich wählt getElementsByClassName alle Elemente mit einer bestimmten Klasse aus und gibt sie als Sammlung zurück.

Beispiel: Unten findet getElementById ein Element anhand seines id-Attributs im HTML-Dokument.

Es wird hier verwendet, um auf die spezifischen Formulareingaben „Neuer Name“, „Neue Zutaten“, „Neues Bild“ und „Neues Rezept“ zuzugreifen und deren Werte abzurufen.

Diese Werte werden dann in den Eigenschaften des newCocktail-Objekts gespeichert, das mit const definiert wird.

Wenn der Benutzer auf diese Weise ein Formular zum Erstellen eines neuen Cocktails sendet, wird dieser strukturiert im newCocktail-Objekt gespeichert.

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOMContentLoaded

Das DOMContentLoaded-Ereignis stellt sicher, dass Ihr JavaScript erst ausgeführt wird, nachdem das DOM vollständig geladen ist, und verhindert so, dass Fehler versuchen, auf Elemente zuzugreifen, bevor diese verfügbar sind.

Beispiel: DOMContentLoaded ist ein Ereignis, das ausgelöst wird, wenn das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder oder andere externe Ressourcen vollständig geladen werden.

Es stellt sicher, dass das DOM vollständig aufgebaut und zugänglich ist, sodass Sie sicher mit Elementen im HTML interagieren können, z. B. durch das Hinzufügen von Ereignis-Listenern oder das Bearbeiten des DOM.

Im folgenden Code teilt Ihnen der Browser mit, dass das Dokument jetzt verfügbar ist und der Benutzer mit der Interaktion beginnen kann.

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

Schlussbemerkungen

DOM-Ereignisse sind von grundlegender Bedeutung, um eine Webseite für Benutzer interaktiv und ansprechend zu gestalten. Durch das Verständnis und die Verwendung von Kernmethoden wie addEventListener, querySelector, getElementById und getElementsByClassName können Sie dynamische Benutzeroberflächen erstellen, die auf Klicks, Formularübermittlungen und mehr reagieren.

Darüber hinaus stellt das DOMContentLoaded-Ereignis sicher, dass Ihre Skripte erst ausgeführt werden, nachdem das DOM vollständig geladen ist, wodurch mögliche Fehler verhindert und eine reibungslose Benutzerinteraktion gewährleistet wird.

Zusammenfassend können Sie mit DOM-Ereignissen Folgendes tun:

• Ereignishandler mit addEventListener für reaktionsfähige Interaktivität anhängen.

• Wählen Sie Elemente mit querySelector oder getElementById aus, um Inhalte dynamisch zu aktualisieren.

• Verwalten Sie ereignisgesteuerte Aktionen basierend auf Benutzereingaben, z. B. Formularübermittlungen.

• Stellen Sie mit DOMContentLoaded sicher, dass Ihre Skripte zum richtigen Zeitpunkt ausgeführt werden.

Mit diesen Techniken können Sie statische Webseiten in interaktive Erlebnisse umwandeln, die die Benutzerinteraktion verbessern.