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

今天在自学的时候碰见了一个奇怪的事情，先给大家列出几个例子，大家猜猜结果。
才疏学浅，有错误请一定指出，首先谢谢您的支持！

1. 示例1
   js代码

function fn() {
        alert("hello");
}

html代码

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

2. 示例2
   js代码

function fn() {
        alert("hello");
}

html代码

<button onclick="fn">hello</button>

3. 示例3
   js代码

function fn() {
        alert("hello");
}
document.getElementsByTagName("button")[0].onclick=fn();

html代码

<button>hello</button>

4. 示例4
   js代码

function fn() {
        alert("hello");
}
document.getElementsByTagName("button")[0].onclick=fn;

html代码

<button>hello</button>

答案：

• 示例1点击弹出“hello”；
• 示例2点击没反应；
• 示例3不用点击，直接弹出“hello”；
• 示例4点击弹出“hello”。

为什么会出现这种情况呢？

首先要记住，fn()会执行，而fn是不执行的。

• 当在html里面写onclick的时候（示例1），实际上fn()是在一个onclick函数里面：

function onclick(){ fn(); } 

所以当你点击按钮的时候，onclick函数会执行，然后onclick里面的是fn()，所以执行onclick函数的时候，fn函数也执行了，但是像示例2中onclick="fn"的话，就是function onclick(){ fn }，这样就算执行了onclick，fn也就不会执行了。

• 当写在js代码里面的时候，onclick实际上就是你赋值的那个函数，在示例3代码里面，onclick就是fn函数，所以当你触发onclick的时候（点击button时），onclick执行（onclick变成onclick()即fn变成fn()），其实就是fn函数执行。如果你换成fn()，不用点击button，onclick直接变成了onclick()所以直接弹出“hello”。