用于调用不同功能的窗口和文档状态/事件管理

时间:2018-11-04 15:51:30

标签: javascript

我试图控制功能并仅在特定时刻启动它们。因此,我想创建一个页面事件管理器,它将自动启动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>

谢谢

0 个答案:

没有答案