无为清净楼资源网 Design By www.qnjia.com
这个问题一直是初学者的困惑。先明白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代码。
标签：
Js,HTML文件位置
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年11月18日
2024年11月18日
- 【雨果唱片】中国管弦乐《鹿回头》WAV
- APM亚流新世代《一起冒险》[FLAC/分轨][106.77MB]
- 崔健《飞狗》律冻文化[WAV+CUE][1.1G]
- 罗志祥《舞状元 (Explicit)》[320K/MP3][66.77MB]
- 尤雅.1997-幽雅精粹2CD【南方】【WAV+CUE】
- 张惠妹.2007-STAR（引进版）【EMI百代】【WAV+CUE】
- 群星.2008-LOVE情歌集VOL.8【正东】【WAV+CUE】
- 罗志祥《舞状元 (Explicit)》[FLAC/分轨][360.76MB]
- Tank《我不伟大，至少我能改变我。》[320K/MP3][160.41MB]
- Tank《我不伟大，至少我能改变我。》[FLAC/分轨][236.89MB]
- CD圣经推荐-夏韶声《谙2》SACD-ISO
- 钟镇涛-《百分百钟镇涛》首批限量版SACD-ISO
- 群星《继续微笑致敬许冠杰》[低速原抓WAV+CUE]
- 潘秀琼.2003-国语难忘金曲珍藏集【皇星全音】【WAV+CUE】
- 林东松.1997-2039玫瑰事件【宝丽金】【WAV+CUE】