javascript onclick

Question

今天寫JS的時候遇到這麼一個問題:

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

上面是我的JS程式碼部分，這裡注意一下，init函數中的第二句，btn.onclick = btnHandle();
我的本意是點擊按鈕，執行btnHandle函數，可實際情況是刷新頁面之後，btnHandle函數直接執行了。
然後我把程式碼改成這樣

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

把btn.onclick = btnHandle();語句中的()去掉後，程式碼就照我所想的正常運作。
這是為什麼？ btnHandle 和 btnHandle()

Answer 1

btn.onclick接受一个函数，代表当 btn 被点击的时候执行这个函数，而你的btnHandle()代表了执行这个函数，给 btn.onclick的是他的回傳值，當然就先執行了。

下面的寫法就代表著，當 btn.onclick 时，执行 btnHandle 函數。

Answer 2

btn.onclick = btnHandle();這句程式碼的意思是把執行結果賦值給點擊事件哦

Answer 3

說明你刷新頁面就會執行init函數，而init函數執行後，在綁定onclick時
這行程式碼btn.onclick = btnHandle();
相當於執行btnHandle方法然後把方法的回傳值賦值給了btn .onclick。
而btn.onclick = btnHandle;
相當於btn.onclick = function(){xxxxx};
也就是說把btnHandle這個變數的引用賦給了btn.onclick
所以當點擊事件觸發時會執行btnHandle代表的函數方法