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


Posted in Javascript onAugust 21, 2013

这个问题一直是初学者的困惑。先明白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放到HTML文件中的哪个位置有什么区别 
结果如图,页面载入就是是这个样子,点击按钮没有反应。将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放到HTML文件中的哪个位置有什么区别 
•说明是可以运行的。这说明,不止可以放函数名了。

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

Javascript 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
类之Prototype.js学习
Jun 13 Javascript
用js遍历 table的脚本
Jul 23 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 #Javascript
jquery ready(fn)事件使用介绍
Aug 21 #Javascript
javaScript面向对象继承方法经典实现
Aug 20 #Javascript
Table冻结表头示例代码
Aug 20 #Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 #Javascript
jQuery回车实现登录简单实现
Aug 20 #Javascript
jquery 延迟执行实例介绍
Aug 20 #Javascript
You might like
PHP文件操作实现代码分享
2011/09/01 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
百度地图API使用方法详解
2015/08/25 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
javascript实现超好看的3D烟花特效
2020/01/01 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
中专毕业生自荐信
2013/11/16 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
高中英语教学反思范文
2016/03/02 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Docker安装MySql8并远程访问的实现
2022/07/07 Servers