一、实验 1：js脚本放在那里最合适？
1、代码
1.1、test.html
<!DOCTYPE html>
<html>
<head>
<title>我的第一个 JavaScript 程序</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>测试Javascript的位置和函数绑定方式</h1>
<div id="myDiv1">
<p>Look，I am here 1000 years！</p>
<div id="myDiv11">MyDiv11::</div>
<div id="myDiv12">MyDiv12::</div>
</div>
<button id="myBtn1">添加按钮1</button>
<button id="myBtn2" onclick="var espan=document.createElement('span');espan.innerHTML='添加方式2->';document.getElementById('myDiv12').appendChild(espan);">添加按钮2</button>
</body>
</html>
1.2、test.js
<!-- 这段js代码如果放在head部，自顶向下执行时还没有myBtn1按钮，会绑定失败！-->
<script>
var myFun1 = function(){
debugger;
var mySpan = document.createElement("span");
mySpan.innerHTML="添加方式1->";
document.getElementById("myDiv11").appendChild(mySpan);
}
var myBtn1 = document.getElementById("myBtn1");
//alert(myBtn1);
//myBtn1.onclick="myFun1()"; // 错误方式1：标签里才可以这么写一句或多句脚本，用分号隔开，一句分号可以省略
//myBtn1.onclick="myFun1();"; // 错误方式2：标签里才可以这么写一句或多句脚本，用分号隔开，一句分号可以省略
//myBtn1.onclick=myFun1(); // 错误方式3：函数会立刻执行，并将返回值赋给onclick
myBtn1.onclick=myFun1;
</script>
2、这段代码放到head里面就不能运行。为什么？
这就要说一下HTML的运行顺序了，应该确切点说不是HTML的运行顺序，是js的运行顺序。
浏览器执行HTML页面代码是自顶向下执行的，运行到<script></script>时开始执行脚本。
- 首先，浏览器将函数定义赋值给了myFun1，这时函数本身并不会运行
- 接着，浏览器试图从页面获取元素Id为myBtn1的元素，但是这时候HTML页面并没有加载完，肯定取不到id为btn的元素。
- 所以，绑定行数也会失败myBtn1.onclick=myFun1;（但是浏览器并木有报绑定失败！！！）
二、实验 2：函数的绑定时机
事件绑定方式常用有两种
- 方式一：在事件中加入js代码。如：onclick="test();"。这种绑定方式有缺点，就是你要修改美工已经写好的代码。
- 方式二：通过id绑定，参见实验一，只需要将每个元素都加上id，不需要修改HTML代码。
1、方式一：在事件中加入js代码，如：onclick="myFun1()"
我们可以在事件中写函数或脚本，脚本之间要用分号隔开。
- <button id="btn" onclick="myFun1()">按钮</button>
- <button id="btn" onclick="myFun1();">按钮</button>
- <button id="btn" onclick="var espan = document.createElement('span');espan.innerHTML='添加';document.getElementById('target').appendChild(espan);">按钮</button>
js代码每一行都有分号，分号的作用就是为了语句被混淆，也就是说onclick里面可以写js代码。
2.2、方式二：document.getElementById("btn").onclick=test;
以下是正确的方式：
-
document.getElementById("btn").onclick=test;
以下是错误的方式：
- myBtn1.onclick="myFun1()"; // 错误方式1：标签里才可以这么写一句或多句脚本，用分号隔开，一句分号可以省略
- myBtn1.onclick="myFun1();"; // 错误方式2：标签里才可以这么写一句或多句脚本，用分号隔开，一句分号可以省略
- myBtn1.onclick=myFun1(); // 错误方式3：函数会立刻执行，并将返回值赋给onclick
错误分析：
如果修改为document.getElementById("btn").onclick=test(); ，会导致如下问题发生：
- 赋值时就调用了函数，赋的值是函数的返回值
- 后来调用onclick触发事件时，执行的是函数返回值。
- 所以只有不加括号时，触发事件才会执行函数本身。