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

更新时间：2013年08月21日 09:39:35 作者：

先明白js能放在HTML的那个位置，分别是head和body中。大部分人都是放到head里面的。下面为大家介绍下放到这两个地方的区别

这个问题一直是初学者的困惑。先明白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="test.js"></script> 

</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="test.js"></script>的时候进入test.js文件。前面的不会运行，也就是被function包起来的不会被运行，这个时候就执行最后一句。去页面中取元素Id为btn的元素。但是这个时候，HTML页面并没有加载完。肯定取不到id为btn的元素。会报错。这个时候有人说可以改为下面的代码:

复制代码代码如下:

 
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="";双引号里面能写什么。一般看到的可以写函数，比如，onclick="test();"。除了这个还能写什么呢?好有这个分号能不写吗?
•看上面的js代码，每一行都有分号。分号的作用就是为了语句被混淆。那也就是说onclick里面可以写js代码。写一个试试，如下

复制代码代码如下:

 
<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> 

•运行结果如下：

•说明是可以运行的。这说明，不止可以放函数名了。

事件绑定方式？
•事件绑定方式常用有两种一是前面介绍的在事件中加入js代码。如：onclick="test();"。这种绑定方式有缺点，就是你要修改，美工已经写好的代码。
•还有一种方式就是我开始代码写的那样，通过id，只需要美工将每个元素都加上id就行。并不需要修改HTML代码。

您可能感兴趣的文章:

JS实现汉字与Unicode码相互转换的方法详解
这篇文章主要介绍了JS实现汉字与Unicode码相互转换的方法,结合实例形式较为详细的分析了javascript针对汉字与Unicode编码转换的操作技巧与相关注意事项,需要的朋友可以参考下
2017-04-04
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
今天小编就为大家分享一篇Layui数据表格判断编辑输入的值,是否为我需要的类型详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
JavaScript中forEach和map详细讲解
foreach和map都是JavaScript中数组的常用方法,它们都可以对数组中的每个元素执行一个函数,但是它们有一些区别,下面这篇文章主要给大家介绍了关于JavaScript中forEach和map详细讲解的相关资料,需要的朋友可以参考下
2023-11-11
Bootstrap Table的使用总结
这篇文章主要介绍了Bootstrap Table的使用小结，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-10-10
基于JavaScript实现无限加载瀑布流
这篇文章主要为大家详细介绍了基于JavaScript实现无限加载瀑布流，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
js for循环倒序输出数组元素的实例
下面小编就为大家带来一篇js for循环倒序输出数组元素的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
JavaScript中发布/订阅模式的简单实例
这篇文章主要介绍了JavaScript中发布/订阅模式的简单实例,本文给出了一个简单易懂的实现代码,比较容易理解,需要的朋友可以参考下
2014-11-11
Javascript 浮点运算的问题分析与解决方法
JavaScript 只有一种数字类型 Number ，而且在Javascript中所有的数字都是以IEEE-754标准格式表示的。浮点数的精度问题不是JavaScript特有的，因为有些小数以二进制表示位数是无穷的
2013-08-08
原生JS实现弹幕效果的简单操作指南
这篇文章主要给大家介绍了关于原生JS实现弹幕效果的简单操作指南，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
浅谈JS中String()与 .toString()的区别
下面小编就为大家带来一篇浅谈JS中String()与 .toString()的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10