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 使用个人心得
Feb 26 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
JavaScript闭包详解
Feb 02 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
如何抽象一个Vue公共组件
Oct 17 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日期时间函数的高级应用技巧
2009/05/16 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
python异步存储数据详解
2019/03/19 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
前台文员岗位职责
2013/12/28 职场文书
幼师求职自荐信
2014/05/31 职场文书
课外活动总结范文
2014/07/09 职场文书
法制教育演讲稿
2014/09/10 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
Python 数据可视化之Bokeh详解
2021/11/02 Python
利用Python实时获取steam特惠游戏数据
2022/06/25 Python