Home/ Questions/Q 8963397
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:20:45+00:00

I saw this on twitter and I couldn’t explain it either. Defining a onload

  • 0

I saw this on twitter and I couldn’t explain it either. Defining a onload function in the following two manner works:

1) JSFiddle

<html>
    <head>
        <script>
            onload = function(){
                alert('this works');
            };
        </script>
</head>
<body>
</body>
</html>​

2) JSFiddle

<html>
    <head>
        <script>
            window.onload = function(){
                alert('this works');
            };
        </script>
</head>
<body>
</body>
</html>​

But when defined like the following, it doesn’t work even though it is assigned to window.onload

3) JSFiddle

<html>
    <head>
        <script>
            function onload(){
                alert('this doesnt work');
            };
            alert(window.onload); // this shows the definition of above function
        </script>
</head>
<body>
</body>
</html>​

What’s going on here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The first two examples assign a function to the window.onload property (window. is implicit in the first example). The onload property actually belongs to the prototype of window (conveniently called Window).

    The third variant declares a new local function with the same name, and that function shadows the property from the prototype. This means, when you ask for window.onload, the engine finds the local version first, and gives up looking up the prototype chain. So alert(window.onload); does alert your function source. However, for the event handler to work, it would have to be assigned to the prototype object’s onload property.

    However, there is something odd going on: when you try to assign to a property that’s inherited from the prototype, it shouldn’t work, and an “own” property should be created on the object, shadowing the one from the prototype (e.g. http://jsfiddle.net/ssBt9/). But window behaves differently (http://jsfiddle.net/asHP7/), and the behavior may even vary depending on the browser.

    • 0