Does a nested anonymous function in Javascript associated with an event handler not work? -

if use named function instead,it :

<script type="text/javascript">    window.onload = function(){        var img = document.getelementbyid('im');         img.onload = fun();     }  function fun() {   alert("image loaded"); }           </script>  <img src="picture.png" id="im"/> 

but, question when try same using an anonymous function(as shown below),why not work?

<script type="text/javascript">           window.onload = function(){        var img = document.getelementbyid('im');           img.onload = function(){            alert("image loaded");         }        }             </script>  <img src="picture.png" id="im"/> 

in first example fun called when event handler attached image (after image has loaded).

in second example, anonymous function attached image after image has loaded.

to see behaviour want, try:

<script type="text/javascript">   window.onload = function(){     var img = document.getelementbyid('im');     img.onload = fun;      img.src = "picture.png";   }     function fun()   {      alert("image loaded");   }           </script>  <img id="im"/> 

or

<script type="text/javascript">       window.onload = function() {      var img = document.getelementbyid('im');      img.onload = function(){        alert("image loaded");      }       img.src="picture.png"     }             </script>  <img id="im"/> 

or

<script type="text/javascript">   function fun()   {      alert("image loaded");   }           </script>  <img id="im" src="picture.png" onload="javascript:fun();"/>