求解:为何匿名函数可以通过,普通函数会马上执行并报错

dl348 2015-11-24 02:36:47
这是一个简单点击标题栏自动隐藏或显示内容的组件,函数show()的内容和pList.onclick的匿名函数一样。但是如果我把onclick的函数由匿名函数替换成show(),在赋值的的时候就会直接运行show,并报错(代码42行注释),使用匿名函数的可以正常运作,求各位大神解答为何会这样?
代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:13px;
list-style:none;}

.menu{width:210px;
margin:50px auto;
border:1px solid #ccc;}

.menu p{height:25px;
line-height:25px;
font-weight:bold;
background:#eee;
border-bottom:1px solid #ccc;
cursor:pointer;
padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
line-height:24px;
padding-left:5px;}
</style>
<script type="text/javascript">
var pList,ulList;
window.onload=function(){
// 将所有点击的标题和要显示隐藏的列表取出来
pList=document.getElementsByTagName('p');
ulList=document.getElementsByTagName('ul');

// 遍历所有要点击的标题且给它们添加索引及绑定事件
for(var i=0;i<pList.length;i++){
pList[i].id=i;
ulList[i].id=i;

//pList[i].onclick=show();
pList[i].onclick=function(){
var k=this.id;
alert("run");
if(ulList[k].style.display=="block"){
ulList[k].style.display="none";
}
else{
ulList[k].style.display="block";
}
};


}
}

function show(){
// 获取点击的标题上的索引属性,根据该索引找到对应的列表

// 判断该列表,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来
var k=this.id;
alert("run");
if(ulList[k].style.display=="block"){
ulList[k].style.display="none";
}
else{
ulList[k].style.display="block";
}
}
</script>
</head>
<body>
<div class="menu" id="menu">
<div>
<p>Web前端</p>
<ul style="display:block">
<li>JavaScript</li>
<li>DIV+CSS</li>
<li>jQuery</li>
</ul>
</div>
<div>
<p>后台脚本</p>
<ul>
<li>PHP</li>
<li>ASP.net</li>
<li>JSP</li>
</ul>
</div>
<div>
<p>前端框架</p>
<ul>
<li>Extjs</li>
<li>Esspress</li>
<li>YUI</li>
</ul>
</div>
</div>
</body>
</html>
...全文
97 回复 打赏 收藏 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,984

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧