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

Question

在用原生JavaScript的对象绑定的方式绑定onclick事件,出来的实际效果却类似于onload的效果.想要鼠标点击按钮弹窗提示,可是实际上却是页面一加载就弹窗提示,点击反而没有效果.
为此,我尝试了三种方式:
实名函数,在按钮属性中调用(属性绑定).OK!
匿名函数,属性绑定和对象绑定均OK!
适应函数,赋值给按钮对象的属性onclick(对象绑定),就出现了上文所说的错误!Error
请看代码片:1.对象绑定事件(失败)
//设置点击按钮//
点击
//定义实名函数fun(),实现弹窗效果//
functionfun(){
alert("xxxx");
}
document.getElementById("b").onclick=fun();//?:onclick怎么成了onload的效果?
2.匿名函数绑定(成功)
//设置点击按钮//
点击
//定义匿名函数fun(),实现弹窗效果//
document.getElementById("b").onclick=function(){
alert("xxxx");
}
3.实名函数,属性绑定(成功)
//设置button的属性onclick绑定fun()//
点击
//定义实名函数//
functionfun(){
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//不加引号立即执行之前学习也也遇到这样的疑问。