原生的JavaScript绑定onclick事件却产生onload的效果?

Question

在用原生JavaScript的对象绑定的方式绑定onclick事件, 出来的实际效果却类似于onload的效果.
想要鼠标点击按钮弹窗提示, 可是实际上却是页面一加载就弹窗提示, 点击反而没有效果.

为此, 我尝试了三种方式:

1. 实名函数, 在按钮属性中调用(属性绑定). OK!

2. 匿名函数, 属性绑定和对象绑定均OK!

3. 适应函数, 赋值给按钮对象的属性onclick(对象绑定), 就出现了上文所说的错误!Error

请看代码片:
1.对象绑定事件(失败)

//设置点击按钮//

<button id="b"  >点击</button>

<script type="text/javascript">

//定义实名函数fun(), 实现弹窗效果//

function fun() {

alert("xxxx");

}

document.getElementById("b").onclick = fun();  //?: onclick 怎么成了onload的效果?

2.匿名函数绑定(成功)

//设置点击按钮//

<button id="b"  >点击</button>

<script type="text/javascript">

//定义匿名函数fun(), 实现弹窗效果//

document.getElementById("b").onclick = function(){

   alert("xxxx");

}

3.实名函数, 属性绑定(成功)

//设置button的属性onclick绑定fun()//

<button id="b"  onclick="fun()">点击</button>

<script type="text/javascript">

//定义实名函数//

function fun() {

    alert("xxxx");

}

为什么第一种方式偏偏失败呢? 这是什么机制导致的?

Answer 1

觉得你在某些方面的理解不对，javascript中，函数是一等公民，因此可以进行赋值等操作。但是 fun() 带括号是对函数的执行，所以先执行fun函数，然后返回值赋值给了onclickxxx.onclick = fun 是将函数 fun 赋值给onclick，函数没有执行。可以分别查看 fun 和 fun() ,一个是function，一个是结果的返回值console.log(fun);console.log(fun());不是因为匿名函数的原因，根本原因还是函数执行的问题xxx.onclick = (function(){})() 这个也是匿名函数，但是这个匿名函数执行了，所以赋值的是结果，而不是函数

Answer 2

补充一下，行内的js代码onclick="fun()"这样就需要加括号，还有其他事件也是，会解析引号中的可执行代码，还有setTimeout和setInterval方法也类似：setTimeout(alert(1),3000);setTimeout("alert(2)",3000);setInterval(alert(3),3000);setInterval("alert(4)",3000);//1//3//2//4//不加引号立即执行之前学习也也遇到这样的疑问。

Answer 3

还有其他事件也是