必威体育Betway必威体育官网
当前位置:首页 > IT技术

html文件中script标签放在哪里?

时间:2019-08-21 08:11:05来源:IT技术作者:seo实验室小编阅读:72次「手机版」
 

script

首先说选择,常见的位置有两个,一个位置是<head>标签里面,另一个是body标签快结束的地方,也就是</body>上面。

然后说结论,一般情况下都可以放。区别嘛可以看个例子(scriptlocation.html):

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>script标签的位置</title>
	<script type="text/javascript">
		function btnClick() {
				alert('helloWorld!');
			};
	
	</script>
</head>
<body>
	<input type="button" id="btn"  value="点击我" οnclick="btnClick();">
</body>
</html> 

这是一个最简单点击按钮弹窗的Demo,此时我们给<input>标签添加了onclick事件并添加了btnClick方法。这种情况下是没有问题的。但是如果来个新需求:修改btn按钮的绑定事件,初步修改代码如下:

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>script标签的位置</title>
	<script type="text/JavaScript">
		function btnClick() {
				alert('helloWorld!');
			};
		document.getelementbyid("btn").onclick = function() {
				alert('hello777!');
			};
	</script>
</head>
<body>
	<input type="button" id="btn"  value="点击我" οnclick="btnClick();">
</body>
</html> 

可是这样那个下面的绑定的匿名函数并没有发挥作用,结果还是HelloWorld!。这就是写在<head>标签里的问题:在页面DOM元素加载完之前,js脚本就已经执行完了。所以最后绑上的还是btnClick(),这也侧面说明这个位置的js适合做一些全局定义且后期不怎么变化的事情

你可能会觉得把οnclick="btnClick();"去掉不就行了吗?那你可以试试,看有什么效果,就明白为什么了。

接下来就可以试试第二个位置:

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>script标签的位置</title>
	<script type="text/javascript">
		function btnClick() {
				alert('helloWorld!');
			};
	</script>
</head>
<body>
	<input type="button" id="btn"  value="点击我" οnclick="btnClick();">
	<script type="text/javascript">
		document.getElementById("btn").onclick = function() {
				alert('hello777!');
			};
	</script>
</body>
</html> 

效果拔群,因为这个位置的js就是等页面元素加载完才执行的

最后,如果只想写在head里而又想达到这个效果,那么可以试试把代码写进onload事件中(简单理解就是等页面加载好的一个事件),使其成为内嵌函数。

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>script标签的位置</title>
	<script type="text/javascript">
		function btnClick() {
				alert('helloWorld!');
			};
		onload = function() {
				document.getElementById("btn").onclick = function() {
				alert('hello777!');
			};
		}
	</script>
</head>
<body>
	<input type="button" id="btn"  value="点击我" οnclick="btnClick();">
</body>
</html> 

相关阅读

微淘直播视频在哪里开通?申请的方法是什么?

微淘目前是店铺引流的最佳平台之一,很多买家朋友在微淘开通视频直播来吸引顾客。那么具体应该在哪里开通了吗?下面小编为大家介绍

淘宝评价有礼的有效评价是什么?顾客在哪里领取礼品?

在淘宝上面购买商品的顾客们常常能够享受到一些赠品或者是可以去参与一些活动来赢得好礼,比如说淘宝评价有礼就是专门给顾客们提供

win7开机启动项怎么设置 电脑开机启动项在哪里设置

win7开机启动项怎么设置 电脑开机启动项在哪里设置 现在的软件很多安装程序都是默认的开机启动,电脑上如果软件的开机启动项多了

从哪里求职kfc肯德基兼职更靠谱一些

从哪里求职kfc肯德基兼职更靠谱一些: 虽然说KFC兼职需求量的确很大,所以在求职的过程中很多人都感觉到比较轻松,但是小编想要跟大家

京东主图视频标签添加方法是什么?有哪些步骤?

现如今,在平台上展示一个商品,可以说不再仅仅是依靠单一的图片来进行的了,更多的还是会选择添加一个主图视频来进行视觉上的宣传。视

分享到:

栏目导航

推荐阅读

热门阅读