直接在html里给标签的点击事件绑定函数的时候，为什么不能这么写？

kuangtuxue 2013-09-17 03:33:59

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

       <a id="a1" href="#" onclick="(function(){alert('a1');})() ">正确</a>

       <a id="a2" href="#" onclick="function(){alert('a2');}">错误</a>

       <a id="a3" href="#">错误吗？</a>

</body>

</html>

<script type="text/javascript">

  var a3 = document.getElementById('a3');

  a3.onclick= function(){alert('a3');};

</script>

结果就是a1和a3的点击事件会正常执行，a2就会有错误。
可是a1、a2、d3的点击事件的绑定方式都是一样的使用匿名函数，而且a2和a3的匿名函数的写法也都是"function(){}"，为啥a2这种写法不行呢？
哪位清楚的，给我多说说这方面的知识吧……

...全文

1809 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

notlikeGaoShou 2013-09-17

打赏
举报

在使用html绑定的时候一定是一个可以运行的函数 <a onclick="aa()">xxx</a> 这个aa必须存在如果我写成 <a onclick="aa">xxx</a>也是不行的必须带运行符号（）所以你第一种写法是对的但是呢在使用句柄绑定的时候 document.getElementById("xxx").onclick=function(){//code here} 这个时候是不带运行符号的（）绑定一个方法的引用就可以不要把这两者混了

notlikeGaoShou 2013-09-17

打赏
举报

引用 1 楼 zzgzzg00 的回复:

a1是匿名函数立即执行也就是你点击后生成函数后立即运行这个函数 a2只是定义函数点击后定义了一个函数而已没执行 a3你可以看做有个属性时onclick 他是个函数当你点击时执行这个函数

正解

阿鱼 2013-09-17

打赏
举报

1楼正解~~。

hch126163 2013-09-17

打赏
举报

<a id="a2" href="#" onclick="function(){alert('a2');}">错误</a> 浏览器会把 onclick 的属性值，封装到一个函数中。相当于： var a3 = document.getElementById('a3'); a3.onclick= function(){ function(){alert('a2');} };

似梦飞花 2013-09-17

打赏
举报

点完a2再点a3就回输出a3和a2了

似梦飞花 2013-09-17

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <a id="a1" href="#" onclick="(function(){alert('a1');})() ">正确</a> <a id="a2" href="#" onclick="window['k']=function(){alert('a2');}">错误</a> <a id="a3" href="#">错误吗？</a> </body> </html> <script type="text/javascript"> var a3 = document.getElementById('a3'); a3.onclick= function(){alert('a3');k()}; </script> 比如这样你点a3时只会输出a3然后报错点完a3再点a3就回输出a3和a2了

似梦飞花 2013-09-17