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代表的函数方法