什么是 JavaScript 事件？

JavaScript事件是指在网页中发生的交互性操作或特定的系统事件，例如用户的点击、鼠标移动、按键按下等。通过JavaScript，你可以捕捉和处理这些事件，并在事件发生时执行相应的代码。

事件可以与网页上的元素相关联，例如按钮、链接、输入框等，也可以与整个文档或浏览器窗口相关联。当事件被触发时，可以执行预定义的JavaScript函数或代码块，以响应事件并执行相应的操作。

以下是一些常见的JavaScript事件：

• 点击事件（click）：
• 鼠标移动事件（mousemove）：
• 键盘事件（keydown、keyup）：
• 表单事件（submit、change）：
• 页面加载事件（load）：
• 页面滚动事件（scroll）：

1：点击事件（click）：
点击事件在用户点击一个元素时触发。你可以将点击事件用于按钮、链接、图像等元素，以执行相关操作。

<button id="myButton">点击我</button>

<script>
  var button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    alert("按钮被点击了！");
  });
</script>

2：鼠标移动事件（mousemove）：
鼠标移动事件在用户在一个元素上移动鼠标时触发。你可以使用该事件来实现根据鼠标位置进行交互的效果，如跟随光标的特效。

<div id="myDiv" style="width: 200px; height: 200px; background-color: red;"></div>

<script>
  var div = document.getElementById("myDiv");
  div.addEventListener("mousemove", function(event) {
    var x = event.clientX;
    var y = event.clientY;
    div.style.backgroundColor = "rgb(" + x + "," + y + ", 100)";
  });
</script>

3：键盘事件（keydown、keyup）：
键盘事件在用户按下或释放键盘上的键时触发。你可以使用键盘事件来捕获用户的键盘输入，执行特定的操作。

<input id="myInput" type="text">

<script>
  var input = document.getElementById("myInput");
  input.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
      alert("按下了回车键！");
    }
  });
</script>

4：表单事件（submit、change）：
表单事件在用户提交表单或更改表单元素的值时触发。你可以使用表单事件来验证用户的输入、发送数据或执行其他与表单相关的操作。

<form id="myForm">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

<script>
  var form = document.getElementById("myForm");
  form.addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    var username = form.elements.username.value;
    alert("用户名：" + username);
  });
</script>

5：页面加载事件（load）：
页面加载事件在整个网页及其所有资源都加载完成后触发。你可以使用该事件来执行一些需要在页面加载完成后进行的初始化操作。

<script>
  window.addEventListener("load", function() {
    alert("页面加载完成！");
  });
</script>

6：页面滚动事件（scroll）：
页面滚动事件在用户滚动网页时触发。你可以使用该事件来实现与页面滚动相关的效果，如导航栏的固定位置或懒加载图片等。

<style>
  body {
    height: 2000px;
  }
</style>

<script>
  window.addEventListener("scroll", function() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    console.log("滚动距离：" + scrollTop);
  });
</script>