提取行间事件（window.onload）行间事件提取行间事件匿名函数window.onload总结

100 阅读 0 评论 66 点赞

我是靠谱客的博主喜悦毛巾，这篇文章主要介绍提取行间事件（window.onload）行间事件提取行间事件匿名函数window.onload总结，现在分享给大家，希望可以做个参考。

行间事件

提取行间事件

匿名函数

window.onload

总结

行间事件

复制代码

1
<input type="button" value="变红" onclick="toRed()" />

其中的onclick事件就是行间事件

这样写会有问题。当大家去公司工作的时候，不止你一个人在写这个页面，有很多人一起来写，编辑（负责往里填内容的），一般来讲编辑不太懂JS等语言，就有可能把行间事件给删除了，所以写行间事件比较危险。

还有一个小问题。栗子：当要给input添加事件，若有很多个且数量不定个input时（比如：选择多个文件时），添加事件就很麻烦，所以就用到 “提取行间事件”

提取行间事件

是为了做到行为、样式、结构三者分离

复制代码

1
2
3
4
5
6
7
8
9
10
<body>
<input id="btn1" type="button" value="提取">
<script>
var oBtn = document.getElementById('btn1');
function liang() {
alert('yaya');
}
oBtn.onclick = liang;
</script>
</body>

匿名函数

聊到这里，就得说到写代码时最麻烦最纠结的就是取名字。往往写到最后就忘了之前起了什么名字。此时就用到了 “匿名函数”，栗子：

复制代码

1
2
3
4
5
6
7
<script>
var oBtn = document.getElementById('btn1');
oBtn.onclick = function () {
alert('yaya')
};
</script>

【注意】花括号外有分号“；”

其实在JS里大部分函数是没有名字的

window.onload

聊到window.onload，就得说到JS是一种运行在客户端（自己的电脑）的脚本语言（script是脚本的意思）。不需要编译，运行过程由JS解释器（JS引擎）逐行来进行解释并运行。

所以当把script标签放在head上时，会抛出错误。解决方法就是用window.onload

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
oBtn.onclick = function () {
alert('yaya')
};
}
</script>
</head>
<body>
<input id="btn1" type="button" value="提取">
</body>