js事件（参考加整理......）

JavaScript事件简介

JavaScript事件是用户与网页交互时触发的动作，如鼠标点击、键盘输入、页面加载等。通过监听和处理这些事件，我们能够让网页实现动态交互，并根据用户的行为做出响应。

JavaScript事件类型

JavaScript提供了丰富的事件类型，涵盖了各种用户交互和页面操作，常见的有：

• 鼠标事件： click、mousedown、mouseup、mousemove、mouseover、mouseout等。
• 键盘事件： keypress、keydown、keyup等。
• 表单事件： submit、reset、change、input等。
• 页面事件： load、unload、scroll、resize等。
• 其他事件： error、abort等。

JavaScript事件处理

要在网页中处理事件，需要使用addEventListener()方法，该方法接受两个参数：事件类型和事件处理函数。例如：

document.getElementById("button").addEventListener("click", function() {
  alert("你点击了按钮！");
});

当用户点击按钮时，上面的代码将触发一个警报框，显示"你点击了按钮！"的信息。

JavaScript事件流

当事件发生时，浏览器会按照一定顺序将事件传递给相关的HTML元素，这个过程称为事件流。事件流有两种模式：事件冒泡和事件捕获。

• 事件冒泡： 事件从最内层元素开始向外层元素传递，直到到达document对象。
• 事件捕获： 事件从最外层元素开始向内层元素传递，直到到达触发事件的元素。

默认情况下，浏览器使用事件冒泡模式来处理事件。

JavaScript事件委托

事件委托是一种优化事件处理性能的技巧，通过将事件监听器绑定到父元素上，然后在事件处理函数中根据事件目标来判断具体触发的子元素，从而实现对子元素的事件处理。

document.getElementById("parent").addEventListener("click", function(event) {
  if (event.target.classList.contains("child")) {
    alert("你点击了子元素！");
  }
});

JavaScript事件阻止

在某些情况下，我们需要阻止事件的默认行为，例如，当用户点击链接时，阻止页面跳转。可以使用preventDefault()方法来阻止事件的默认行为。

document.getElementById("link").addEventListener("click", function(event) {
  event.preventDefault();
  alert("你点击了链接，但页面没有跳转！");
});

结语

JavaScript事件是网页交互的基础，通过理解和掌握JavaScript事件，我们可以轻松实现各种动态交互效果，让网页变得更加生动和有趣。