DOMContentLoaded не запускается в машинописи - PullRequest
Новая
       33

DOMContentLoaded не запускается в машинописи

0 голосов
/ 23 октября 2019

Я пытаюсь запустить событие DOMContentLoaded в машинописи после завершения загрузки страницы.

Я не могу определить, куда поместить строку addEventListener('DOMContentLoaded', event ()=>{}), чтобы я мог запросить элементы, загруженные каксейчас я помещаю этот код в конструктор моего класса веб-компонентов, но он не запускается.

Ниже приведен код. 

 constructor() {
    super();
    document.addEventListener('DOMContentLoaded', (e) => {
        this.domCompleteHandler(e)
    }, false);
}
 domCompleteHandler(e: Event) {
    //if (e.target!.readystatechange === "complete") {
        var chkbxes = document!.querySelector('my-app[apptitle="my app"]')!.shadowRoot!.querySelector('[active]')!.shadowRoot!.querySelector("#permSection")!.querySelector("#permtable")!.shadowRoot!.querySelector("#permtable")!.querySelectorAll(".permchk");
        chkbxes!.forEach(el => {
            el.addEventListener('click', (e) => {
                this.clickHandler(e);
            });
        });
    console.log(e);
    console.log(chkbxes);
    //}
}

1 Ответ

0 голосов
/ 23 октября 2019

Наиболее вероятная ситуация здесь заключается в том, что это событие уже сработало до запуска этого кода.

Вы можете проверить это, поместив прослушиватель событий где-то ранее в ваше приложение. Одним из примеров может быть добавление приведенного ниже сценария непосредственно в верхней части HTML-страницы: 

<script>
  document.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded fired');
  });
</script>

Это должно показать сообщение журнала в ваших журналах в тот момент, когда происходит событие, что, вероятно, дообъект, показанный в приведенном выше примере кода, был создан.

Как правило, это событие возникает, когда основной документ загружен и проанализирован, но не подресурсы. Это означает, что если ваша строка кода запускается асинхронно после загрузки документа (например, если она ожидает fetch или setTimeout или если тег <script> помечен как async), то вполне возможно, чтособытие будет запущено первым.

Есть еще один вариант: событие может вообще не запускаться, потому что содержимое DOM действительно еще не загружено. Это гораздо менее вероятно, но вы можете подтвердить состояние документа, установив глобальный document.readyState. Если установлено значение interactive или complete, событие уже сработало.

...