爲什麼下面的代碼 「的document.getElementById（id）的.onclick = [..]」 顯示同樣的結果

Question

請解釋爲什麼在評論真正的代碼和代碼顯示完全相同的結果

<p>Click button to display date</p> 
 
<button type="button" id="button">Click</button> 
 
<p id="paragraph"></p> 
 

 
<script> 
 
function display() { 
 
var d = new Date(); 
 
document.getElementById("paragraph").innerHTML=d; 
 
} 
 
document.getElementById("button").onclick=display; 
 
/* Why does above line shows same results shown by:- 
 
document.getElementById("button").onclick=function() { display(); }; 
 
*/ 
 
</script>

Answer 1

在一種情況下，當您單擊該按鈕時，您可以撥打display。

另一方面，當你點擊按鈕時，你會調用一個除了調用display之外什麼也不做的函數。

display函數不會注意傳遞給它的參數，所以事件對象不會傳遞的事實並不重要。

之間並無實際區別：

display(event); 

和

function onclick() { 
    display(); 
} 
onclick(event); 

Answer 2

看一看的MDN here

的onclick將一個函數引用。您發佈的兩種方式之間沒有區別，因爲「display」是函數引用，您輸入的匿名函數也是函數引用。它恰好在它內部調用顯示。

Answer 3

onclick想要一個函數引用。當onclick發生時，js調用傳遞給這個項目的函數。當你將「顯示」傳遞給它時，然後調用display（）。當你傳遞「function（）{...}」給它，然後調用這個函數，你必須調用display，而不僅僅是引用「display」，因爲js只是調用傳遞給onclick的函數，而且你必須調用其他功能你自己。