Hören Sie auf ein Ereignis, wenn eine Klasse zu einem HTML-Element mit plain Javascript

Question

hinzugefügt wurde Ich benutze Scroll-Spion von bootstrap. Eine active Klasse wird hinzugefügt, wenn das Scroll-Element angezeigt wird. Dies ist das normale Verhalten von Scroll Spion.

Ich versuche nur benachrichtigt zu werden, wenn die aktive Klasse zu einem li-Element hinzugefügt wird.

<li 
    key  = {`${idx}`} 
    className = "panel " 
> 
    <a 
     href  = {`#${groupId}`} 
     data-toggle = "collapse" 
     data-parent = {`#${accordionId}`} 
     data-target = {`#Menu${idx}`} 
     className = "temp-link" 
    > 
     Menu 
    </a> 
    <ul className="nav nav-list panel-collapse collapse " id={`${ulIdx}`}> 
      <li> .... </li> 
      <li> .... </li> 
      <li> .... </li> 
    </ul> 
</li> 

Ich versuche nur li Ereignishandler Eltern zu befestigen, die aufgerufen wird, wenn sie active Klasse bekommt. Zu diesem Zeitpunkt zeige ich ul Element über Hinzufügen Klasse collapse in. Ich verwende ReactJs und möchte keine jquery-basierten Lösungen verwenden. Alle einfacheren javascriptbasierten Lösungen, Ideen oder Vorschläge sind willkommen.

Answer 1

Überprüfen Sie die MutationObserver API.

Sie können ein bestimmtes DOM-Element für Änderungen beobachten und einen Rückruf ausführen, wenn eine solche Änderung auftritt. Die verbleibende Funktionalität sollte trivial zu implementieren sein.

MutationObserver bietet Entwicklern eine Möglichkeit, auf Änderungen in einem DOM zu reagieren. Es dient als Ersatz für Mutationsereignisse, die in der DOM3-Ereignisspezifikation definiert sind.