Javascript onclick

Question

Ich bin heute beim Schreiben von JS auf ein solches Problem gestoßen:

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

Das Obige ist mein JS-Codeteil. Achten Sie hier auf den zweiten Satz in der Init-Funktion: btn.onclick = btnHandle(); Nach dem Aktualisieren der Seite wird die Funktion btnHandle direkt ausgeführt.
Dann habe ich den Code so geändert

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

Nach dem Entfernen des () in der btn.onclick = btnHandle();-Anweisung läuft der Code normal, wie ich dachte.

Warum ist das so? btnHandle und 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代表的函数方法