DOMContentLoaded未在打字稿中触发

问题描述 投票:0回答:1

我正在尝试在页面加载完成后在打字稿中触发DOMContentLoaded事件。

我无法弄清楚在哪里放置addEventListener('DOMContentLoaded', event ()=>{})行,因此我现在可以查询已加载的元素,现在将这段代码放入Web组件类的构造函数中,但未触发。

下面是代码。

 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);
    //}
}
typescript progressive-web-apps lit-element
1个回答
0
投票

最有可能的情况是此事件在此代码运行之前已经触发。

您可以通过在应用程序中的较早位置放置事件侦听器来进行测试。一个示例是直接在HTML页面顶部附近直接添加以下脚本:

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

应该在事件触发时在日志中显示日志消息,这很可能在实例化上面代码示例中显示的对象之前。

还有另一种选择:该事件可能根本不触发,因为DOM内容确实尚未加载。这不太可能,但是您可以通过检查document.readyState全局来确认文档状态。如果将其设置为interactivecomplete,则说明该事件已经触发。

© www.soinside.com 2019 - 2024. All rights reserved.