Влияет ли вложенная анонимная функция в Javascript, связанная с обработчиком событий?

Question

Если я использую с именем функции вместо этого, это хорошо:

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

Но мой вопрос заключается в том, что, когда я пытаюсь сделать то же самое с помощью анонимной функции (, как показано ниже), почему это не работает?

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

Answer 1

В первом примере fun вызывается, когда обработчик события присоединен к изображению (после загрузки изображения).

Во втором примере анонимная функция прикрепляется к изображению после загрузки изображения.

Чтобы увидеть поведение, которое вы хотите, попробуйте:

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

или

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

или

<script type="text/javascript"> 
    function fun() 
    { 
    alert("Image loaded"); 
    }   
</script> 

<img id="im" src="picture.png" onload="javascript:fun();"/>