这个问题一直是初学者的困惑。先明白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="/UploadFiles/2021-04-02/test.js">
</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="/UploadFiles/2021-04-02/test.js">复制代码 代码如下:
document.body.onload = function(){
document.getElementById("btn").onclick=test;
};
但是这样写还不如，写到</body>的前面呢。
有没有注意到，上面的[document.getElementById("btn").onclick=test;]中test没有括号，那如果改成[test()].会怎么样呢
结果如图，页面载入就是是这个样子，点击按钮没有反应。将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="test();"。除了这个还能写什么呢?好有这个分号能不写吗?
"codetitle">复制代码 代码如下:
<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>
"//img.jbzj.com/file_images/article/201308/201308210937123.gif?201372193750">
"test();"。这种绑定方式有缺点，就是你要修改，美工已经写好的代码。
•还有一种方式就是我开始代码写的那样，通过id，只需要美工将每个元素都加上id就行。并不需要修改HTML代码。
先看一段html代码:
复制代码 代码如下:
<html>
<head>
<title> New Document </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="/UploadFiles/2021-04-02/test.js">
</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="/UploadFiles/2021-04-02/test.js">复制代码 代码如下:
document.body.onload = function(){
document.getElementById("btn").onclick=test;
};
但是这样写还不如，写到</body>的前面呢。
有没有注意到，上面的[document.getElementById("btn").onclick=test;]中test没有括号，那如果改成[test()].会怎么样呢
结果如图，页面载入就是是这个样子，点击按钮没有反应。将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="test();"。除了这个还能写什么呢?好有这个分号能不写吗?
"codetitle">复制代码 代码如下:
<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>
"//img.jbzj.com/file_images/article/201308/201308210937123.gif?201372193750">
"test();"。这种绑定方式有缺点，就是你要修改，美工已经写好的代码。
•还有一种方式就是我开始代码写的那样，通过id，只需要美工将每个元素都加上id就行。并不需要修改HTML代码。
风云阁资源网 Design By www.bgabc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
风云阁资源网 Design By www.bgabc.com
暂无评论...
更新日志
2024年11月18日
2024年11月18日
- 费翔.2000-费常翔念2CD【环球】【WAV+CUE】
- Rachmaninoff-SuitesNos.12,TheSleepingBeauty-MikuOmine,TakakoTakahashi(2024)[24-
- 童丽《影视金曲（1：1黄金母盘版）》[WAV]
- 柏菲·胭花四乐《胭花四乐》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 群星《监听耳机天碟》2018[WAV分轨][1G]
- 群星《娱协奖原创金曲合辑》滚石[WAV+CUE][1.1G]
- 罗大佑《美丽岛》2CD[WAV+CUE][1.1G]
- 言承旭.2009-多出来的自由【SONY】【WAV+CUE】
- 赤道.2000-精选2CD【ACM】【WAV+UCE】
- 许廷铿.2017-神奇之旅【华纳】【WAV+CUE】
- 李克勤《罪人》环球[WAV+CUE][1G]
- 陈粒2024《乌有乡地图》有此山文化[FLAC分轨][1G]
- 蔡依林《MYSELF》 奢华庆菌版 2CD[WAV+CUE][1.5G]
- 刘春美《心与心寻世界名曲中文版》新京文[低速原抓WAV+CUE]
- 朱逢博《蔷薇蔷薇处处开》[FLAC+CUE]