Wie gehe ich mit dem Ereignis-Listener-Anhang für dynamisch generierte Elemente ohne jQuery um?

Dynamischer Ereignis-Listener-Anhang

Sie möchten Ereignis-Listener an dynamisch generierte Elemente auf einer Webseite anhängen, die Ihnen nicht gehört. Da Sie jQuery nicht verwenden können, suchen Sie nach einer alternativen Lösung.

Ereignisdelegation ist in diesem Szenario ein praktikabler Ansatz. Indem Sie einen Listener an ein übergeordnetes Element (z. B. Body) anhängen, können Sie Ereignisse erfassen, die aus seinen untergeordneten Elementen hervorgehen, einschließlich der dynamisch erstellten.

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

In diesem Snippet:

• Wir fügen dem Body-Element einen Klickereignis-Listener hinzu.
• Wenn ein Klickereignis auftritt, überprüfen wir den tagName des event.target.
• Wenn das Ziel ein < ;li> Element führen wir die gewünschte Aktion aus.

Beachten Sie, dass dieser Ansatz auf dem Event-Bubbling beruht. In einigen älteren Browsern, die diesen Mechanismus nicht unterstützen, funktioniert es möglicherweise nicht. Wenn darüber hinaus dynamisch generierte Elemente in anderen Elementen verschachtelt sind (z. B.

innerhalb von

), müssen Sie möglicherweise den Ereignisdelegierungsselektor entsprechend anpassen.

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