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打开word文档的实现代码(c#)
Apr 16 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
哪些是python中web开发框架
2020/06/17 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
美容院店长岗位职责
2014/04/08 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
建筑工地文明标语
2014/10/09 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
单位实习鉴定评语
2015/01/04 职场文书
Linux安装Docker详细教程
2022/07/07 Servers