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

Question

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

    <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>

我使用第一种方式或第二种方式并不重要，但无论如何我都发布了......我的意思是，该输出取决于 //first way 代码或 //second way 代码的顺序，首先添加哪个监听器，首先显示该函数的消息...您可以尝试交换位置...但时间都是相同的(您可以增加间隔或发出警报以获得更好的 View )，这让我认为所有三个事件的行为都是相同的...

注意:我只针对 chrome 进行了测试

我的额外问题是:
如何区分用户是刚刚打开我的网站还是重新加载？

如果您对我的额外问题有任何建议，我将不胜感激......

Answer 1

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

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

该行调用 loading() (以便打印您的消息)并将其返回值(无任何内容)传递给 addEventListener() 作为回调。事件触发时不会执行任何操作。

这不是我建议的做法，而是尝试这样做:

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