提升用户体验：详解事件处理与函数绑定在Web开发中的实践-优快云博客

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/123969529

文章目录

事件定义
事件的处理
- 绑定函数，减小耦合
事件的所有种类

事件定义

事件就是用户和浏览器之间的交互行为：
如：点击按钮、鼠标移动，关闭窗口

事件的处理

事件是由用户触发的，触发之后需要浏览器有所反应，才能完成交互。
浏览器的反应就是事件处理的过程。
我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，浏览器就会返回这些事件对应的属性值，从而这些代码将会执行。
eg：

 <button id="btn" onclick="alert('点我干啥')">按钮</button>

点击之后就会执行 onclick中的 JS 代码；

绑定函数，减小耦合

按照上面的写法，JS 和 HTML 代码有耦合，不方便后期的维护，所以我们使用处理函数来处理代码。
处理函数写在

获取对象
给对象的属性（触发事件）绑定相应的处理函数

 <body>
    <button id="btn">按钮</button>
    <script>
      // 获取对象
      var btn = document.getElementById("btn");

      // 给对象添加属性，并赋值(绑定处理函数)
      // 这样当对应的事件触发时，的时候就执行相对应的函数
      btn.onclick = function(){
        alert("你点我干啥");
      }
      // 像这种为单击事件绑定的函数，我们称为单击响应函数
    </script>
  </body>