javascript - onload，onunload，onbeforeunload之间的区别

我可能会令人毛骨悚然，但我正在测试一些东西，但我有点不明白那里发生三件事的目的...
所以这是我的测试代码：

    <div id="timeBU"></div>
    <div id="timeL"></div>
    <div id="timeUL"></div>
    <div id="text"></div>
    <script type="text/javascript">
        function loading(message, timeId) {
            var secs=0;
            var interval = setInterval(function() {
                document.getElementById(timeId).innerHTML = secs;
                secs++;
            },1);
            document.getElementById("text").innerHTML += "<br>"+message+"<br>";
        }

        // first way
        window.addEventListener("beforeunload", loading("beforeunload", "timeBU"));
        window.addEventListener("load", loading("load", "timeL"));
        window.addEventListener("unload", loading("unload", "timeUL"));

        // second way
        // window.onunload = loading("beforeunload", "timeBU");
        // window.onload = loading("load", "timeL");
        // window.onbeforeunload = loading("unload", "timeUL");
    </script>

不管我使用第一方式还是第二方式，但是无论如何我都发布了...
我的意思是，输出取决于//第一方式代码或//第二方式代码的顺序，首先添加了侦听器，该函数的消息首先显示...您可以尝试交换位置...但时间是都是一样的（您可以增加间隔或提醒某些内容以便更好地查看），这让我认为所有三个事件的行为都相同...
注意：我只测试了chrome

我的额外问题是：无论用户只是打开我的网站还是重新加载，我该如何区分？
如果您对我的其他问题有任何建议，我将不胜感激...

最佳答案

因为您正在调用loading()函数，所以您不用作回调：

window.addEventListener("beforeunload", loading("beforeunload", "timeBU"))

该行调用loading()（这样将打印您的消息），并将其返回值（无）传递给addEventListener()作为回调。触发事件时将不执行任何操作。

这不是我建议的方式，而是尝试以下方法：

window.addEventListener("beforeunload", function () {
    loading("beforeunload", "timeBU")
});