Document 'load' event callbacks not called; how did I mess this up?

April 4, 2022

In this HTML document, in Chrome, none of my load event callbacks are called:

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script>
            console.log('just checking');
            function someFunction () { console.log('test 3'); }
            document.addEventListener('load', () => console.log('test 1'));
            document.addEventListener('load', function () { console.log('test 2'); });
            document.addEventListener('load', someFunction);
        </script>
    </head>
    <body>
    </body>
</html>

However, I can see that they are set in the inspector:

And there are no errors in the console.

I am almost certain this is some trivial error on my part, and I can’t figure out what it is.

I spent a fair amount of time searching the internet for reasons, but for the most part every post I found about failed load callbacks generally had to do with accessing the DOM before it was ready, which doesn’t really apply here.

I hand-wavily tried setting the defer attribute on the script but it had no effect.

What am I missing here… ?

>Solution :

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script>
    function docReady(func) {
        document.addEventListener("DOMContentLoaded", function (event) {
           func(event);
        });
    }
        function someFunction () { console.log('test 3'); }
        docReady(() => console.log('test 1'));
        docReady(function () { console.log('test 
 2'); });
        docReady(someFunction);
    </script>
</head>
<body>
</body>
</html>

use ‘DOMContentLoaded’ instead ‘load’