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

Question

在用原生JavaScript的对象绑定的方式绑定onclick事件, 出来的实际效果却类似于onload的效果.想要鼠标点击按钮弹窗提示, 可是实际上却是页面一加载就弹窗提示, 点击反而没有效果.为此, 我尝试了三种方式:实名函数, 在按钮属性中调用(属性绑定). OK!匿名函数, 属性绑定和对象绑定均OK!适应函数, 赋值给按钮对象的属性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函数，然后返回值赋值给了onclick

xxx.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

还有其他事件也是