JS代码放在head和body中的区别分析


Posted in Javascript onDecember 01, 2011

那么有什么不同呢?先看一个例子:
一个二级级联动态下拉列表框,一级分类(即大类别)id="vSort0".

<head> 
function changelocation(id) 
{…………} 
</head> 
<body><select class="input1" id="vSort0" name="vSort0" onChange="changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);" style="width:100px;">……省略……</select> 
……………… 
</body>

现在有个js脚本:
<script LANGUAGE= "JavaScript" > 
changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一个一级分类的二级分类,去掉后第一个一级分类的二级分类在页面载入之后不显示。回选才显示。将一级分类的value传给changelocation()函数,生成二级分类的列表 
</script>

那么把这个js脚本放head里面还是body里面呢?
答案是不仅要放到body里面,而且还得放到定义id='vSort0'的列表框后面,因为这个js脚本中有document.form4.vSort0.selectedIndex,如果放到head里或者body的id='vSort0'前,页面加载后顺序执行代码,执行到这个js发现vSort0未定义(即undefind),这个js也就失去了作用。
而为什么我们经常看到有很多的人把js脚本放到head里面没事呢?对!
就是因为你看到的在head里的js代码有onclick等事件传递了变量给函数。
这就告诉我们,如果我们想定义一个全局对象,而这个对象与页面中的某个按钮(等等)有关时, 我们必须将其放入body中,道理很明显:如果放入head,那当页面加载head部分的时候,那个按钮(等等)都还没有被定义(也可以说是还没有被加 载,因为加载的过程就是执行代码的过程,包括了定义),你能得到的只可能是一个undefind。
Javascript 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
jQuery控制TR显示隐藏的几种方法
Jun 18 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
Cpage.js给组件绑定事件的实现代码
Aug 31 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 #Javascript
js取滚动条的尺寸的函数代码
Nov 30 #Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 #Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 #Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 #Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 #Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 #Javascript
You might like
如何给phpadmin一个保护
2006/10/09 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
解决vue项目router切换太慢问题
2020/07/19 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python计算回文数的方法
2015/03/11 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
化学相关工作求职信
2013/10/02 职场文书
大学自我鉴定范文
2013/12/26 职场文书
回门宴答谢词
2014/01/13 职场文书
结婚典礼致辞
2015/07/28 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技