DOM-Ereignisse in JavaScript verstehen: Ein umfassender Leitfaden zur Interaktion

DOM-Ereignisse in JavaScript

DOM-Ereignisse sind Aktionen oder Ereignisse, die im Browser stattfinden, wie z. B. Benutzerinteraktionen, Laden von Ressourcen oder Zustandsänderungen. Ereignisse sind ein integraler Bestandteil der Webentwicklung und ermöglichen es Entwicklern, Webseiten interaktiv zu gestalten.

---

1. Was sind DOM-Ereignisse?

DOM-Ereignisse stellen Interaktionen oder Änderungen dar, die mithilfe von JavaScript erkannt werden können. Beispiele für Veranstaltungen sind:

• Anklicken einer Schaltfläche (Klick)
• Eingabe in ein Eingabefeld (Eingabe, Keydown, Keyup)
• Bewegen Sie den Mauszeiger über ein Element (Mouseover, Mouseout)
• Ein Formular absenden (submit)
• Seitenladevorgang abgeschlossen (Laden)

---

2. Ereignis-Listener

Ereignis-Listener sind Funktionen, die darauf warten, dass ein bestimmtes Ereignis auf einem Zielelement auftritt.

Hinzufügen eines Ereignis-Listeners

Verwenden Sie die Methode addEventListener, um einen Ereignis-Listener an ein Element anzuhängen.

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

Entfernen eines Ereignis-Listeners

Verwenden Sie die Methode „removeEventListener“, um einen Ereignis-Listener zu trennen.

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

---

3. Arten von DOM-Ereignissen

A. Mausereignisse

• click: Wird ausgelöst, wenn mit der Maus auf ein Element geklickt wird.
• dblclick: Wird ausgelöst, wenn mit der Maus doppelgeklickt wird.
• Mouseover: Wird ausgelöst, wenn die Maus ein Element betritt.
• Mouseout: Wird ausgelöst, wenn die Maus ein Element verlässt.

B. Tastaturereignisse

• keydown: Wird ausgelöst, wenn eine Taste gedrückt wird.
• keyup: Wird ausgelöst, wenn eine Taste losgelassen wird.
• Tastendruck: Veraltet, verwenden Sie stattdessen Tastendruck.

C. Formularereignisse

• Senden: Wird ausgelöst, wenn ein Formular gesendet wird.
• Änderung: Wird ausgelöst, wenn sich der Wert eines Eingabeelements ändert.

D. Fensterereignisse

• laden: Wird ausgelöst, wenn die Seite vollständig geladen ist.
• Größe ändern: Wird ausgelöst, wenn die Größe des Browserfensters geändert wird.
• scroll: Wird ausgelöst, wenn die Seite gescrollt wird.

E. Eingabeereignisse

• Eingabe: Wird ausgelöst, wenn sich der Wert eines Eingabefelds ändert.
• Fokus: Wird ausgelöst, wenn ein Eingabeelement den Fokus erhält.
• Unschärfe: Wird ausgelöst, wenn ein Eingabeelement den Fokus verliert.

---

4. Das Ereignisobjekt

Wenn ein Ereignis auftritt, stellt JavaScript ein Ereignisobjekt bereit, das Details zum Ereignis enthält.

Gemeinsame Eigenschaften des Ereignisobjekts

• Typ: Die Art des Ereignisses (z. B. Klicken, Tastendruck).
• Ziel: Das Element, das das Ereignis ausgelöst hat.
• currentTarget: Das Element, an das der Event-Handler angehängt ist.
• präventDefault(): Verhindert die Standardaktion des Ereignisses.
• stopPropagation(): Stoppt die Weitergabe des Ereignisses an übergeordnete Elemente.

Beispiel

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

---

5. Ereignisweitergabe

Die Ereignisweitergabe bestimmt die Reihenfolge, in der Ereignishandler ausgeführt werden.

A. Ereignis sprudelt

Das Ereignis beginnt beim Zielelement und sprudelt bis zu seinen Vorfahren.

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

Durch Klicken auf die Schaltfläche werden beide Handler ausgelöst.

B. Ereigniserfassung

Das Ereignis beginnt an der Wurzel und bewegt sich nach unten zum Zielelement.

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Event type:", event.type); // Output: click
  console.log("Target element:", event.target); // Output: <button>...</button>
  event.preventDefault(); // Prevent default behavior
});

Wenn Sie den dritten Parameter auf „true“ setzen, wird die Erfassung aktiviert.

Vermehrung stoppen

Verwenden Sie stopPropagation(), um eine weitere Ausbreitung zu verhindern.

document.querySelector("div").addEventListener("click", function() {
  console.log("Div clicked!");
});

document.querySelector("button").addEventListener("click", function() {
  console.log("Button clicked!");
});

---

6. Veranstaltungen delegieren

Die Ereignisdelegation nutzt das Ereignis-Bubbling, um Ereignisse für dynamisch hinzugefügte Elemente zu verwalten.

Beispiel

element.addEventListener("click", handler, true);

---

7. Praxisbeispiele

A. Sichtbarkeit umschalten

button.addEventListener("click", function(event) {
  event.stopPropagation();
});

B. Formularvalidierung

document.querySelector("ul").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("List item clicked:", event.target.textContent);
  }
});

C. Unendliche Schriftrolle

const button = document.querySelector("button");
const content = document.querySelector(".content");

button.addEventListener("click", function() {
  content.style.display = content.style.display === "none" ? "block" : "none";
});

---

8. Zusammenfassung

• DOM-Ereignisse ermöglichen die Interaktion zwischen Benutzern und Webseiten.
• Verwenden Sie addEventListener, um Ereignishandler anzuhängen.
• Verstehen Sie das Ereignisobjekt und die Ausbreitung für ein effektives Ereignismanagement.
• Verwenden Sie die Ereignisdelegation für eine bessere Leistung bei der Arbeit mit dynamischen Elementen.

Durch die Beherrschung von DOM-Ereignissen können Sie hochgradig interaktive und benutzerfreundliche Webanwendungen erstellen.

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonDOM-Ereignisse in JavaScript verstehen: Ein umfassender Leitfaden zur Interaktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!