JavaScript的常用事件

JavaScript 中的事件是用户与网页进行交互时发生的动作或行为，例如点击按钮、鼠标移动、键盘按键等。为了响应这些事件，JavaScript 提供了事件处理程序（event handlers）来处理它们。

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

鼠标事件：

• click：当用户点击元素时触发。

• dblclick：当用户双击元素时触发。

• mouseover：当鼠标指针移动到元素上方时触发。

• mouseout：当鼠标指针移出元素时触发。

• mousemove：当鼠标指针在元素上移动时持续触发。

• mousedown：当按下鼠标按钮时触发。

• mouseup：当释放鼠标按钮时触发。

键盘事件：

• keydown：当用户按下键盘上的任意键时触发。

• keyup：当用户释放键盘上的任意键时触发。

• keypress：当用户按下并释放键盘上的字符键时触发（不包括功能键如 Shift、Ctrl、Alt 等）。

表单事件：

• submit：当表单提交时触发。

• change：当表单元素的值发生变化时触发（如输入框、选择框的值改变）。

• focus：当元素获得焦点时触发（如输入框被点击或 Tab 键选中）。

• blur：当元素失去焦点时触发。

• input：当 、 或 元素的值发生变化时触发。

窗口和文档事件：

• load：当页面或资源（如图片、CSS 文件等）完全加载完成时触发。

• unload：当页面卸载时触发，通常用于清理资源或执行最后的操作。

• resize：当浏览器窗口大小改变时触发。

• scroll：当页面滚动时触发。

触摸事件：

• touchstart：当手指触摸屏幕时触发。

• touchmove：当手指在屏幕上移动时触发。

• touchend：当手指离开屏幕时触发。

• touchcancel：当触摸事件被取消时触发。

其他事件：

• error：当 JavaScript 运行时发生错误时触发。

• ready：当文档结构已完全加载，但不一定所有外部资源（如图片）都加载完成时触发。这通常使用 jQuery 的 $(document).ready() 方法来处理。

事件监听

可以使用 addEventListener 方法来监听这些事件，并为每个事件提供一个处理函数（也称为事件处理程序或事件监听器）。例如：

// 为按钮添加点击事件处理程序
document.getElementById('myButton').addEventListener('click', function() {
    console.log('按钮被点击了！');
});

以下是一些常见 JavaScript 事件的代码示例：

鼠标点击事件 (click)

element.addEventListener('click', function(event) {
  console.log('鼠标点击事件');
  console.log(event);
});

鼠标按下事件 (mousedown)

element.addEventListener('mousedown', function(event) {
  console.log('鼠标按下事件');
  console.log(event);
});

鼠标抬起事件 (mouseup)

element.addEventListener('mouseup', function(event) {
  console.log('鼠标抬起事件');
  console.log(event);
});

鼠标移动事件 (mousemove)

element.addEventListener('mousemove', function(event) {
  console.log('鼠标移动事件');
  console.log(event);
});

鼠标进入事件 (mouseenter)

element.addEventListener('mouseenter', function(event) {
  console.log('鼠标进入事件');
  console.log(event);
});

鼠标离开事件 (mouseleave)或鼠标移出事件 (mouseout)

element.addEventListener('mouseleave', function(event) {
  console.log('鼠标离开事件');
  console.log(event);
});

鼠标滚动事件 (scroll)

element.addEventListener('scroll', function(event) {
  console.log('鼠标滚动事件');
  console.log(event);
});

按下键盘按键时触发

document.getElementById('myInput').addEventListener('keydown', function(event) {
    console.log('按下了键码为: ' + event.keyCode);
});

输入框中释放键盘按键时触发

document.getElementById('myInput').addEventListener('keyup', function(event) {
    console.log('释放了键码为: ' + event.keyCode);
});

表单提交时触发

var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    console.log('表单被提交了！');
});

输入框的值发生变化时触发

document.getElementById('myInput').addEventListener('input', function() {
    console.log('输入框的值是: ' + this.value);
});

页面加载完成时触发

window.addEventListener('load', function() {
    console.log('页面加载完成！');
});

窗口大小改变时触发

window.addEventListener('resize', function() {
    console.log('窗口大小已改变！');
});

触摸屏幕时触发

document.addEventListener('touchstart', function(event) {
    console.log('开始触摸，触摸点数量: ' + event.touches.length);
});

在屏幕上移动手指时触发

document.addEventListener('touchmove', function(event) {
    console.log('触摸移动，触摸点数量: ' + event.touches.length);
});

手指离开屏幕时触发

document.addEventListener('touchend', function(event) {
    console.log('触摸结束，触摸点数量: ' + event.changedTouches.length);
});

请注意！触摸事件通常用于移动设备上的触摸屏幕。

其他事件

// 当 JavaScript 运行时发生错误时触发
window.addEventListener('error', function(event) {
    console.error('发生错误: ', event.message);
});

// 当文档结构已完全加载时触发（可以使用 jQuery 的 ready 方法）
document.addEventListener('DOMContentLoaded', function() {
    console.log('文档已加载完成！');
});