求解:为何匿名函数可以通过,普通函数会马上执行并报错
这是一个简单点击标题栏自动隐藏或显示内容的组件,函数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>
代码如下:
<!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>
...全文
相关推荐
js匿名函数作为函数参数详解
下面小编就为大家带来一篇js匿名函数作为函数参数详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
浅析Javascript匿名函数与自执行函数
的相关资料
JS匿名函数和匿名自执行函数概念与用法分析
主要介绍了JS匿名函数和匿名自执行函数概念与用法,结合实例形式分析了匿名函数和匿名自执行函数的概念、功能、应用场景及相关使用技巧,需要的朋友可以参考下
JS立即执行的匿名函数用法分析
主要介绍了JS立即执行的匿名函数,结合实例形式分析了;(function() {})();相关原理、使用技巧及操作注意事项,需要的朋友可以参考下
javascript匿名函数中的'return function()'作用
主要介绍了javascript匿名函数中的'return function()'作用介绍,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下


