Прослушайте событие, когда класс был добавлен в элемент HTML с использованием простого JavaScript

Question

Я использую прокрутку шпион от bootstrap, active класс добавляется, когда появляется элемент прокрутки. Это нормальное поведение прокрутки шпиона.

Я просто пытаюсь получить уведомление, когда активный класс добавляется в элемент li.

<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>

Я просто пытаюсь прикрепить обработчик событий к родителю li который будет вызван, когда он получит active учебный класс. В это время я покажу ul элемент через добавление класса collapse in, Я использую ReactJs и не хочу использовать какие-либо решения на основе jquery. Любые более простые решения на основе JavaScript, идеи или предложения приветствуются.

Answer 1

Проверьте MutationObserver API.

Это позволяет вам наблюдать за конкретным элементом DOM для изменений и выполняет обратный вызов, если такое изменение происходит. Оставшаяся функциональность должна быть тривиальной для реализации.

MutationObserver предоставляет разработчикам способ реагировать на изменения в DOM. Он предназначен для замены событий мутации, определенных в спецификации событий DOM3.