首先说选择，常见的位置有两个，一个位置是<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="点击我" onclick="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="点击我" onclick="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="点击我" onclick="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="点击我" onclick="btnClick();">
</body>
</html>
1149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
