我正在尝试在页面加载完成后在打字稿中触发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);
//}
}
最有可能的情况是此事件在此代码运行之前已经触发。
您可以通过在应用程序中的较早位置放置事件侦听器来进行测试。一个示例是直接在HTML页面顶部附近直接添加以下脚本:
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded fired');
});
</script>
应该在事件触发时在日志中显示日志消息,这很可能在实例化上面代码示例中显示的对象之前。
还有另一种选择:该事件可能根本不触发,因为DOM内容确实尚未加载。这不太可能,但是您可以通过检查document.readyState
全局来确认文档状态。如果将其设置为interactive
或complete
,则说明该事件已经触发。