为什么html里面的onclick函数后面要加()，而js里面不需要？

Question

这两个本质区别是什么？

更新：问题已经解决了，一二楼已经解释的很清楚了，其实我只是想知道这两种onclick的机制以及执行环境等等的区别，而不是要书上那种片面的说法，还是谢谢大家啦

Answer 1

很简单，html里的onxxxx="..."属性，相当于在相应的事件里执行eval("...")，明白这一点，你甚至可以在里面写一长串的js代码。

<button onclick="for(var a=0;a<10;a++)alert(a)">alert 0 to 9</button>

Answer 2

本质在这里 https://developer.mozilla.org...

注意第一句话

Every HTML element has a set of attributes that allow for the
execution of JavaScript when certain events happen

意思就是 html上直接用的 onclick 里面的“” 相当于一段js代码，直接执行的，所以作为函数调用，当然要有()，要不执行什么？？

js里面的onclick 实际走的 EventTarget.addEventListener() 这个你应该懂的。

Answer 3

题主刚才自己做了一下测试，大概知道是为什么了。

当在html里面写onclick的时候，实际上fn()是在一个onclick函数里面。
这个时候浏览器的console控制台打印出来的是function onclick(){ fn(); }
所以当你点击按钮的时候，onclick函数会执行，然后onclick里面的是fn()，所以执行onclick函数的时候，fn函数也执行了，但是如果这时候onclick="fn"的话，就是function onclick(){ fn }，这样就算执行了onclick，fn也就不会执行了。

当用DOM0级事件的时候，onclick实际上就是你赋值的那个函数，在上面代码里面，onclick就是fn函数，所以当你触发onclick的时候，onclick执行，其实就是fn函数执行，如果你换成fn()，不用触发onclick就会直接执行。

看了楼上哥们的回答，我又测试了一下，onclick里面加个eval()也是可以，大概和上面那个onclick函数包裹是一个意思的，两者的区别主要是执行环境

Answer 4

前者是引用后者是函数本身

Answer 5

调用函数

Answer 6

()你应该知道了，就是执行的意思。
如果你写fn()那你要的就是结果的意思，应该onClick 本身就是浏览器的触发机制，所以你不用括号

Answer 7

铺垫
实际上是这样，在一般的页面当中，有些DOM节点，不是写死在页面上，而是通过JS动态生成的。比如楼主文中所说的这个按钮

<button onclick="fn()">111</button>

那么
考虑到这种情况，一般我们在页面是不直接在DOM节点上直接使用 onclick=“fn()”这样的，主流一点的方法是

var $btn = $('#id')
$btn.on('click', function () {
    //code
})

因此，我觉得就这个问题而言，巧妙的避过了"fn()"与“fn”的问题