今天在自学的时候碰见了一个奇怪的事情，先给大家列出几个例子，大家猜猜结果。
才疏学浅，有错误请一定指出，首先谢谢您的支持！
- 示例1
js代码
function fn() {
alert("hello");
}
html代码
<button onclick="fn()">hello</button>
- 示例2
js代码
function fn() {
alert("hello");
}
html代码
<button onclick="fn">hello</button>
- 示例3
js代码
function fn() {
alert("hello");
}
document.getElementsByTagName("button")[0].onclick=fn();
html代码
<button>hello</button>
- 示例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”。
