时间戳

首页 > 解决方案 > DOMContentLoaded 没有在打字稿中被解雇

typescript - DOMContentLoaded 没有在打字稿中被解雇

问题描述

页面加载完成后，我试图在打字稿中触发 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);
    //}
}

标签： typescriptprogressive-web-appslit-element

解决方案

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

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

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

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

通常，当主文档已加载并被解析时会触发此事件，但不会触发子资源。这意味着如果您的代码行与文档加载异步运行（例如，如果它等待 afetch或setTimeout，或者如果<script>标记被标记为async），那么事件很可能会首先触发。

还有另一种选择：事件可能根本不会触发，因为 DOM 内容实际上还没有加载。这不太可能，但您可以通过检查document.readyState全局来确认文档状态。如果设置为，interactive或者complete事件已经触发。

推荐阅读