非匿名函数
function 名字()
{
...
}
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>非匿名函数</title>
</head>
<body>
<input id="btn1" type="button" value="按钮">
<script>
var oBtn=document.getElementById('btn1');
function abc()
{
alert('a');
}
oBtn.onclick=abc;
</script>
</body>
</html>
匿名函数
oBtn.onclick=function()
{
...
}
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匿名函数</title>
</head>
<body>
<input id="btn1" type="button" value="按钮">
<script>
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
alert('a');
}
</script>
</body>
</html>
上面非匿名函数与匿名函数例子中的 <input>标签 与 <script>标签 都必须放在<body> 标签中才有效果。
而一般的话<script>标签一般都是放在<head>标签中,那让我们来试试:
注:下面代码是错误示范哦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匿名函数</title>
<script>
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
alert('a');
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮">
</body>
</html>
运行出来会发现Cannot set property 'onclick' of null即无法将属性“onclick”设置为空。因为JS特点是读一行执行一行,当读到
oBtn.onclick=function()
{
alert('a');
}
时,下面的代码就没加载出来,没加载出来也就找不到<input>标签里的id="btn1",也就是在给不存在的onclick加点击事件,所以就有Cannot set property 'onclick' of null即无法将属性“onclick”设置为空这个错误。
而上面例子中的<script>标签要想放在<head>标签中就需要在<script>标签里加上window.onload(on联想到事件,load是加载的意思),window.onload意思就是当页面加载完成时发生的一个事件,下面试试呗:
非匿名函数:
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>非匿名函数</title>
<script>
window.onload=function abc()
{
var oBtn=document.getElementById('btn1');
function abc()
{
alert('a');
}
oBtn.onclick=abc;
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮">
</body>
</html>
匿名函数也如此:
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>匿名函数</title>
<script>
window.onload=function()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
alert('a');
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮">
</body>
</html>