我试图控制功能并仅在特定时刻启动它们。因此,我想创建一个页面事件管理器,它将自动启动dom的每个子功能稀疏。
简短地:
检查是否准备就绪?装了吗其他? ->调用或启动与此状态相关的任何子功能(或什么?)。
我无法复制这些函数的名称,并且我不知道会有多少个函数,所以...如何检查?想法?
代码:online interactive exemple of code
代码副本:
<head>
<script>
var eventResult ="none";
window.addEventListener('unload', () => {
e.preventDefault(); e.returnValue = '';
console.info("::::::::: window start or exit \n::::::::: (info: perfect to intercept hystory frame etc.)\n\n");
WinStartExit(eventResult = "page star/texit");
},false);
document.addEventListener("DOMContentLoaded", () => {
if (document.readyState === 'interactive') {
console.info("::::::::: after Dom Tree is Ready and loaded (and reload)\n::::::::: (info: low cpu and doesn't consider the extra fires called)\n\n");
DomTreeLoaded(eventResult = "dom tree is readed");
};
},false);
window.addEventListener("DOMContentLoaded", () => {
console.info("::::::::: after Win Fire and Content Readed\n::::::::: (info: low cpu and does not consider the fires called)\n\n");
WindowIsReaded(eventResult = "window contents is ready");
},false);
window.addEventListener('load', function () {
if (document.readyState === 'complete') {
console.info("::::::::: after all Content is Loaded \n::::::::: (info: all images, css, scripts, etc. are loaded, final page rendered)\n\n");
WindowLoadedContent(eventResult = "all content is loaded");
};
},false);
</script>
</head>
<body>
<h1>
WIN/DOM EVENTS MANAGEMENT
</h1>
<p>
goal: Status check and call ALL external sub-function.
</p>
</body>
<script>
WinStartExit = () => {
alert(eventResult);
};
DomTreeLoaded = () => {
alert(eventResult+" A");
};
DomTreeLoaded = () => {
alert(eventResult+" B");
};
WindowIsReaded = () => {
alert(eventResult+" A");
};
WindowIsReaded = () => {
alert(eventResult+" B");
};
WindowLoadedContent = () => {
alert(eventResult+" A");
};
WindowLoadedContent = () => {
alert(eventResult+" B");
};
</script>
谢谢