differences between onload, onunload, onbeforeunload

Question

I might be creepy but I am testing something and I kind of don't understand the purpose of there three events...
so here is my testcode:

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

it desn't matters I use first way or second way, but anyways I posted both... What I am saying, that output depend on the order of //first way code or //second way code, which listener is added first, that function's message is displayed first... you can try swapping places... but time is all the same (you can increase interval or alert something for better view), that makes me think that all three events behave same...

Note: I've tested this only for chrome

my extra question is:
How can I differ whether user just opened my site or reloaded?

if you have some kind of advices about my extra question, I would be grateful...

Below I answered your main question (why that events _seem_ the same thing), your extra question has been answered many times (also here on SO), for example (random pick from a long list) in this post: http://stackoverflow.com/questions/5004978/check-if-page-reloaded-or-refresh-in-js/5005035#5005035 — Adriano Repetti, Aug 01 '14 at 11:10
@Adriano Repetti window.addEventListener("beforeunload",function() { document.getElementById("text").innerHTML +="alert should be now"; alert("asd"); }); for me text is displayed but alert isn't fired, is it normal? — Ratty, Aug 01 '14 at 11:46
Yes, you're inserting HTML text, it won't be executed as script (even if it contains JS code). JS code can be in an href target (with javascript: prefix), in DOM events (such us onload) and inside script tags. Anything else won't be evaluated (unless some other JS code does it like jQuery when you inject script tags). See also this post: http://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml — Adriano Repetti, Aug 01 '14 at 11:56
I may have misunderstood you, but I didn't tried to execute js code by innerHTML... on refresh that text is flashing fast enough to detect... after that innerHTML thing I called alert — Ratty, Aug 01 '14 at 12:11
yes, text will flash because for the short time between onbeforeunload and when page will be reloaded it'll be present. alert won't fire (be executed) because script won't be executed (see link in my previous comment). Anyway if you just put JS there (without script tag) it's not even a script but simple plain text. Moreover usually alerts after onbeforeunload aren't displayed (sometimes - browser dependent - just inside that event handler, sometimes anywhere after event has been fired). — Adriano Repetti, Aug 01 '14 at 12:20
Thanks again... I checked that link, but I kind of thought that you mixed my code, because it was displayed not well in the comment and I wanted to make sure... thank you for help — Ratty, Aug 01 '14 at 12:43

score 1 · Accepted Answer · answered Aug 01 '14 at 10:52

Because you're calling loading() function, you're not using as a callback:

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

That line calls loading() (so your message is printed) and passes its return value (nothing) to addEventListener() as callback. Nothing will be performed when event will be fired.

It's not how I'd suggest to do it but try instead this:

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

score 0 · Answer 2 · answered Aug 01 '14 at 11:10

This code worked for me. (tested in firefox & chrome). The only difference now is that loading(message, timeId) now returns a function which gets called as a callback. Events always require you to pass a Callback (which refers to a function) which gets called as soon as the event is called.

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


    window.addEventListener("beforeunload", loading("beforeunload", "timeBU"));
    window.addEventListener("load", loading("load", "timeL"));
    window.addEventListener("unload", loading("unload", "timeUL"));
</script>

differences between onload, onunload, onbeforeunload

2 Answers2