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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
小程序实现订单倒计时功能
Apr 23 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与浏览器缓存的分析
2013/06/03 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
JS控制表格隔行变色
2006/06/26 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
玩转python爬虫之URLError异常处理
2016/02/17 Python
简述Python中的进程、线程、协程
2016/03/18 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
python里glob模块知识点总结
2021/01/05 Python
python中K-means算法基础知识点
2021/01/25 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
拓展培训心得体会
2014/01/04 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
初婚未育证明样本
2014/10/24 职场文书
商务邀请函
2015/01/30 职场文书
北京天坛导游词
2015/02/12 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
python文件名批量重命名脚本实例代码
2021/04/22 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
MySQL导致索引失效的几种情况
2022/06/25 MySQL