web - button.onclick = func(); vs <Schaltfläche onclick = "func()"?

Question

Ich bin neu in Javascript und ich benutze nicht jQuery.

Ich versuche, meine Funktion btnHandle() laufen zu lassen, wenn ich auf die Schaltfläche klicke.

Allerdings fand ich, dass

btn.onclick = btnHandle(); 

unterscheidet sich von

<button id="sort-btn" onclick="btnHandle()">submit</button> 

Wenn ich btn.onclick = btnHandle();, die btnHandle() Funktion ausgeführt wird, wenn ich den Code ohne Klicken auf die Schaltfläche aktualisieren.

Ich möchte die Funktion nur ausgeführt werden, wenn die Schaltfläche geklickt hat.

<button id="sort-btn" onclick="btnHandle()">submit</button> funktioniert wie ich will.

Warum funktioniert die vorherige nicht gut? Warum wird das onclick Ereignis ausgelöst, wird die Seite geladen?

<button id="sort-btn" onclick="btnHandle()">submit</button> 

    <script type="text/javascript"> 

    function btnHandle() { 
     var aqiData = getData(); 
     aqiData = sortAqiData(aqiData); 
     render(aqiData); 
    } 


    function init() { 
     var btn = document.getElementById("sort-btn"); 
    //  btn.onclick = btnHandle(); 
    } 

    init(); 
    </script> 

Answer 1

Als Kevin weist darauf hin ausführt, wird die Funktion sofort ausgeführt wird, weil Sie Klammern hinter ihm.

Beide Ansätze sind jedoch jetzt veraltet. Sie sollten addEventListener:

btn.addEventListener('click', btnHandle); 

verwenden

Answer 2

btn.onclick = btnHandle; 

ohne Klammern verweist

btnHandle die Funktion während btnHandle(), um die Funktion