提取行间事件（window.onload）

最新推荐文章于 2023-08-15 10:27:06 发布

梁什么鸭，

最新推荐文章于 2023-08-15 10:27:06 发布

阅读量322

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Lm_choose_live/article/details/116334165

版权

Javascript 专栏收录该内容

74 篇文章 2 订阅

订阅专栏

行间事件

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

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

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

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

提取行间事件

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

<body>
<input id="btn1" type="button" value="提取">

<script>
  var oBtn = document.getElementById('btn1');

  function liang() {
    alert('yaya');
  }
  oBtn.onclick = liang;
</script>
</body>

匿名函数

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

<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

<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>