javascript学习（1）用户的Javascript 放在哪里和函数的绑定方式

2022-12-10 12:28:28

一、实验 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

<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触发事件时，执行的是函数返回值。
所以只有不加括号时，触发事件才会执行函数本身。

码农公寓