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 相关文章推荐
jquery操作select大全
Apr 25 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
使用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 visitFile()遍历指定文件夹函数
2010/08/21 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
python决策树之C4.5算法详解
2017/12/20 Python
python 将md5转为16字节的方法
2018/05/29 Python
Django model反向关联名称的方法
2018/12/15 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
Java程序员综合测试题
2014/04/25 面试题
财务与信息服务专业推荐信
2013/11/28 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
企业安全生产规章制度
2015/08/06 职场文书
小学数学国培研修日志
2015/11/13 职场文书