Js放到HTML文件中的哪个位置有什么区别

网络编程 2024/11/15 佚名

3 2 1

这个问题一直是初学者的困惑。先明白js能放在HTML的那个位置，分别是head和body中。大部分人都是放到head里面的。我学的时候也是稀里糊涂的跟着放到head的里面，也不知道为什么？今天看说说，放到这两个地方的区别:
先看一段html代码:
复制代码代码如下:
<html>
<head>
<title> New Document </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<script type="text/javascript" src="/UploadFiles/2021-04-02/test.js">
</head>

<body>
<div id="target">

</div>
<button id="btn">按钮</button>

</body>
</html>

复制代码代码如下:
var test = function(){
var span = document.createElement("span");
span.innerHTML="添加";
document.getElementById("target").appendChild(span);
}

document.getElementById("btn").onclick=test;

如果这段代码放到head里面就不能运行。为什么？
这就要说一下HTML的运行顺序了，应该确切点说不是HTML的运行顺序，是js的运行顺序。HTML从上运行到<script type="text/html" src="/UploadFiles/2021-04-02/test.js">复制代码代码如下:
document.body.onload = function(){
document.getElementById("btn").onclick=test;
};

但是这样写还不如，写到</body>的前面呢。
有没有注意到，上面的[document.getElementById("btn").onclick=test;]中test没有括号，那如果改成[test()].会怎么样呢

结果如图，页面载入就是是这个样子，点击按钮没有反应。将js代码改成如下:
复制代码代码如下:
var test=function(){
var span = document.createElement("span");
span.innerHTML="添加";
document.getElementById("target").appendChild(span);
return function(){
alert("aaaa");
};
}

document.getElementById("btn").onclick=test();

页面载入的时候，还是和上面一个样子，当点击按钮的时候，有反应了弹出一个框内容是”aaaa“;说明点击的时候执行了函数中return的值。也就是加括号的时候，不触发事件也会执行函数。触发事件的时候执行函数的返回值。不加括号的时候，触发事件才执行函数。

html的事件触发器，内容能写什么？
"";双引号里面能写什么。一般看到的可以写函数，比如，onclick="test();"。除了这个还能写什么呢?好有这个分号能不写吗?
"codetitle">复制代码代码如下:
<html>
<head>
<title> New Document </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">

</head>

<body>
<div id="target">

</div>
<button id="btn" onclick="var espan = document.createElement('span');espan.innerHTML='添加';document.getElementById('target').appendChild(espan);">按钮</button>

</body>
</html>

"//img.jbzj.com/file_images/article/201308/201308210937123.gif?201372193750">
"test();"。这种绑定方式有缺点，就是你要修改，美工已经写好的代码。
•还有一种方式就是我开始代码写的那样，通过id，只需要美工将每个元素都加上id就行。并不需要修改HTML代码。

Js,HTML文件位置