Wie können Sie auf Ereignisse für dynamisch erstellte Elemente warten, ohne jQuery zu verwenden?

So fügen Sie Ereignis-Listener zu dynamisch erstellten Elementen hinzu

Wenn Sie an Webseiten arbeiten, die dynamische Inhalte enthalten, kann es erforderlich sein, Ereignis-Listener zu Elementen hinzuzufügen, die dies nicht sind zunächst auf der Seite vorhanden. Dieser Leitfaden beschreibt eine Methode, um dies zu erreichen, ohne auf jQuery angewiesen zu sein.

Der ursprüngliche Ansatz bestand darin, doc.body.addEventListener('click') zu verwenden, um Ereignisse für vorhandene Elemente beim Laden der Seite zu verarbeiten. Für dynamisch generierte Elemente ist jedoch eine robustere Lösung erforderlich.

Delegierung und Ereignisweitergabe

Der Schlüssel zum dynamischen Hinzufügen von Ereignis-Listenern ist die Ereignisdelegierung. Mit diesem Ansatz können Sie einen einzelnen Ereignis-Listener an ein übergeordnetes Element (z. B. den Text) anhängen und dann das Ziel des Ereignisses überprüfen, um das spezifische Element zu ermitteln, auf das geklickt wurde.

Beispielcode

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Perform actions specific to 'li' elements
  }
});</code>

In diesem Beispiel wird ein Ereignis-Listener an den Körper angehängt. Wenn auf ein Element im Textkörper geklickt wird, wird das Ziel des Ereignisses untersucht. Wenn das Ziel ein Li-Element ist, werden die gewünschten Aktionen ausgeführt.

Vorbehalte

Beachten Sie, dass der bereitgestellte Code mit modernen Browsern kompatibel ist. Für die Browserkompatibilität mit älteren Versionen von Internet Explorer ist möglicherweise ein benutzerdefinierter Wrapper um die nativen Ereignisfunktionen erforderlich.

Das obige ist der detaillierte Inhalt vonWie können Sie auf Ereignisse für dynamisch erstellte Elemente warten, ohne jQuery zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!