Heim > Web-Frontend > js-Tutorial > Wie gehe ich mit dem Ereignis-Listener-Anhang für dynamisch generierte Elemente ohne jQuery um?

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

DDD
Freigeben: 2024-10-22 11:17:29
Original
411 Leute haben es durchsucht

How to Handle Event Listener Attachment for Dynamically Generated Elements Without jQuery?

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>
Nach dem Login kopieren

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!

  • Quelle:php
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage