Wie gehe ich mit Ereignis-Listenern für dynamisch erstellte Elemente ohne jQuery um?

Ereignis-Listener für dynamisch erstellte Elemente

Um Ereignis-Listener zu dynamisch generierten Elementen ohne jQuery hinzuzufügen, können Sie die Ereignisdelegierung einsetzen. So geht's:

Ereignisdelegation verwenden
Mit der Target-Eigenschaft des Ereignisobjekts können Sie identifizieren, auf welchem ​​Element das Ereignis aufgetreten ist. Auf diese Weise können Sie einen Ereignis-Listener an ein übergeordnetes Element binden und prüfen, ob das Zielelement auf bestimmte Kriterien reagiert. Zum Beispiel:

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Do your action on the newly created 'li'
  }
});</code>

In diesem Beispiel ist der Ereignis-Listener an den Körper gebunden, und wenn auf ein untergeordnetes Element geklickt wird, prüft der Code, ob es sich um ein „li“ handelt. Wenn ja, wird die angegebene Aktion ausgeführt.

Vorbehalte
Beachten Sie, dass dieser Ansatz gut mit modernen Browsern funktioniert, die den Ereignisdelegierungsmechanismus unterstützen. Für ältere IE-Versionen müssen Sie möglicherweise einen benutzerdefinierten Event-Handler mithilfe von attachmentEvent.

implementieren

Das obige ist der detaillierte Inhalt vonWie gehe ich mit Ereignis-Listenern für dynamisch erstellte Elemente ohne jQuery um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!