JavaScript 常用事件有哪些

在 JavaScript 编程中，事件是与用户交互或页面状态变化时触发的特定操作。了解和掌握常用的事件对于创建动态和交互性强的网页至关重要。以下是一些常见的 JavaScript 事件：

1. 点击事件（click）

当用户点击页面上的元素时触发。例如，点击按钮、链接或其他可点击的区域。

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

2. 鼠标悬停事件（mouseover 和 mouseout）

mouseover 事件在鼠标指针移动到元素上时触发，而 mouseout 事件在鼠标指针移出元素时触发。

document.getElementById("myDiv").addEventListener("mouseover", function() {
  this.style.backgroundColor = "yellow";
});

document.getElementById("myDiv").addEventListener("mouseout", function() {
  this.style.backgroundColor = "white";
});

3. 键盘事件（keydown、keyup 和 keypress）

keydown 事件在按下键盘按键时触发，keyup 事件在释放按键时触发，keypress 事件在按下产生字符值的按键时触发。

document.addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    alert("您按下了回车键！");
  }
});

4. 表单事件（submit、change 和 focus）

submit 事件在表单提交时触发，change 事件在表单元素的值发生改变时触发，focus 事件在元素获得焦点时触发。

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  alert("表单提交！");
});

document.getElementById("myInput").addEventListener("change", function() {
  alert("输入框的值改变了！");
});

document.getElementById("myInput").addEventListener("focus", function() {
  this.style.backgroundColor = "lightblue";
});

5. 页面加载事件（load）

当页面完全加载（包括图像、脚本等所有资源）时触发。

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

6. 滚动事件（scroll）

当用户滚动页面时触发。

window.addEventListener("scroll", function() {
  // 执行滚动相关的操作
});

7. resize 事件

当窗口大小改变时触发。

window.addEventListener("resize", function() {
  // 处理窗口大小变化的逻辑
});

这些只是 JavaScript 中的一部分常用事件，通过合理地运用这些事件，可以为网页添加丰富的交互效果，提升用户体验。不同的事件适用于不同的场景，根据具体的需求选择合适的事件来实现相应的功能。