JavaScript中这些事件（event）类型你都知道吗？

JavaScript中有许多不同类型的事件，用于监听和响应Web页面上的各种交互和用户动作。以下是一些常见的JavaScript事件类型：

1. 鼠标事件：

   • click: 鼠标点击元素时触发。
   • mouseover 和 mouseout: 鼠标进入和离开元素时触发。
   • mousedown 和 mouseup: 鼠标按下和释放鼠标按钮时触发。

2. 键盘事件：

   • keydown 和 keyup: 用户按下和释放键盘键时触发。
   • keypress: 用户按下字符键时触发。

3. 表单事件：

   • submit: 用户提交表单时触发。
   • change: 输入元素（如文本框或下拉列表）的值更改时触发。
   • focus 和 blur: 元素获得或失去焦点时触发。

4. 窗口事件：

   • load: 页面加载完成时触发。
   • resize: 窗口大小发生改变时触发。
   • scroll: 页面滚动时触发。

5. 媒体事件：

   • play、pause 和 ended: 针对音频和视频元素的播放状态事件。
   • canplay 和 canplaythrough: 媒体可以播放时触发。

6. 通用事件：

   • DOMContentLoaded: 当页面的DOM结构加载完成时触发。
   • error: 发生JavaScript错误时触发。
   • offline 和 online: 网络连接状态改变时触发。

要使用这些事件，您可以使用JavaScript为元素添加事件监听器，然后定义要执行的函数。例如，您可以使用 addEventListener 方法来监听特定事件，如下所示：

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  alert('按钮被点击了！');
});

- 用户界面事件（UIEvent）

1. click 事件：

   • 触发时机：当用户单击页面上的元素（如按钮、链接、图像等）时触发。
   • 用途：通常用于执行某种操作，比如提交表单、打开模态框、切换菜单等。

2. mouseover 和 mouseout 事件：

   • 触发时机：当鼠标光标进入（mouseover）或离开（mouseout）元素时触发。
   • 用途：常用于创建悬停效果、改变元素样式或显示/隐藏相关内容。

3. mousedown 和 mouseup 事件：

   • 触发时机：当用户按下（mousedown）或释放（mouseup）鼠标按钮时触发。
   • 用途：通常与click事件结合使用，用于实现复杂的鼠标操作，例如拖拽。

4. keydown、keyup 和 keypress 事件：

   • 触发时机：当用户按下键盘按键（keydown）、释放键盘按键（keyup）或按下字符键（keypress）时触发。
   • 用途：常用于实现键盘快捷键、搜索框自动完成等功能。

5. submit 事件：

   • 触发时机：当用户提交表单时触发。
   • 用途：通常用于验证表单数据、阻止默认提交行为、异步提交等。

6. change 事件：

   • 触发时机：当表单元素（如文本框、下拉列表）的值发生变化并失去焦点时触发。
   • 用途：常用于实时搜索、过滤数据、更新页面内容等。

7. focus 和 blur 事件：

   • 触发时机：当元素获得焦点（focus）或失去焦点（blur）时触发。
   • 用途：通常用于改变输入框的样式、显示/隐藏帮助文本或提示信息。

8. contextmenu 事件：

   • 触发时机：当用户右键单击元素时触发。
   • 用途：通常用于自定义上下文菜单，阻止默认的浏览器上下文菜单。

9. resize 事件：

   • 触发时机：当窗口大小改变时触发。
   • 用途：通常用于响应式设计，调整页面布局或重新计算元素大小。

10. scroll 事件：

    • 触发时机：当页面滚动时触发。
    • 用途：通常用于创建滚动效果、懒加载图片、触发动画等。

- 焦点事件（FocusEvent）

1. focus事件：

• 当HTML元素获得焦点时触发。
• 例如，如果用户单击输入框或使用键盘导航到输入框，该输入框将获得焦点，并触发focus事件。
• 您可以使用addEventListener方法来侦听此事件，然后执行相应的操作

document.getElementById("myInput").addEventListener("focus", function() {
  // 当元素获得焦点时执行的操作
});

1. blur事件：
   • 当HTML元素失去焦点时触发。
   • 例如，如果用户从输入框中移开或使用键盘导航到其他元素，该输入框将失去焦点，并触发blur事件。
   • 您可以使用addEventListener方法来侦听此事件，然后执行相应的操作。

document.getElementById("myInput").addEventListener("blur", function() {
  // 当元素失去焦点时执行的操作
});

?-?鼠标事件（MouseEvent）

1. mousedown：当用户在页面上按下鼠标按钮时触发。可以用于处理按钮点击、链接点击等事件。
2. mouseup：当用户在页面上释放鼠标按钮时触发。可以用于处理按钮释放、链接点击结束等事件。
3. mousemove：当用户在页面上移动鼠标时触发。可以用于处理鼠标移动、拖拽等事件。
4. mouseover：当用户将鼠标指针移入元素内部时触发。可以用于处理元素悬停、提示信息显示等事件。
5. mouseout：当用户将鼠标指针移出元素外部时触发。可以用于处理元素移出时的清理操作等。

这些事件可以通过监听元素的addEventListener方法来添加事件处理函数。当相应的事件发生时，该函数将被调用，并可以执行相应的操作，如修改元素状态、更新页面内容等。

// 获取需要监听点击事件的元素
var button = document.getElementById("myButton");

// 添加点击事件处理函数
button.addEventListener("click", function() {
  // 在这里编写点击事件处理逻辑
  alert("按钮被点击了！");
});

- 滚轮事件（WheelEvent）

滚轮事件对象包含以下属性和方法：

• deltaMode：表示滚轮滚动的模式，常见的有"pixel"和"line"两种模式。
• deltaY：表示滚轮垂直方向滚动的距离，向上滚动为负值，向下滚动为正值。
• deltaX：表示滚轮水平方向滚动的距离，向左滚动为负值，向右滚动为正值。
• deltaZ：表示滚轮的收拢和拉扯情况，一般不常用。

开发者可以通过添加滚轮事件监听器，来触发特定的代码逻辑。例如，可以根据滚动距离来实现页面的自动滚动、图片的缩放等效果。

以下是一个简单的示例代码，展示了如何使用JavaScript监听滚轮事件：

document.addEventListener('wheel', function(event) {
  // 根据滚动的距离修改页面的行为
  var deltaY = event.deltaY;
  if (deltaY > 0) {
    // 向下滚动
    // 执行相关的代码逻辑
  } else if (deltaY < 0) {
    // 向上滚动
    // 执行相关的代码逻辑
  }
});

通过监听滚轮事件，开发者可以为用户提供更流畅和交互性的页面体验，并实现基于滚动的自定义交互效果。

-?输入事件?（InputEvent）

键盘事件：

• keydown：当按下键盘上的任意键时触发。
• keyup：当释放键盘上的任意键时触发。
• keypress：当按下键盘上的可打印字符时触发。

这些事件对象中，可以获取到与键相关的信息，如按下的键的值、按下的键的代码和键盘布局等。

鼠标事件：

• click：当用户点击鼠标左键或触摸屏幕时触发。
• mousedown：当用户按下鼠标按键或触摸屏幕时触发。
• mouseup：当用户释放鼠标按键或触摸屏幕时触发。
• mousemove：当用户移动鼠标或触摸屏幕时触发。

这些事件对象中，可以获取鼠标位置信息、按下的鼠标按键信息等。

触摸事件：

• touchstart：当用户触摸屏幕时触发。
• touchmove：当用户在屏幕上滑动手指时触发。
• touchend：当用户从屏幕上抬起手指时触发。
• touchcancel：当触摸事件被系统打断时触发，比如来电。

这些事件对象中，可以获取触摸点的位置、滑动的方向和速度等。

开发者可以通过添加相应的事件监听器来捕获输入事件并执行相应的代码逻辑。例如，根据用户的按键来调整页面布局，根据鼠标点击来展示弹出窗口等等。

以下是一个简单的示例代码，展示了如何使用JavaScript监听键盘事件和鼠标事件：

document.addEventListener('keydown', function(event) {
  // 获取按下的键
  var key = event.key;
  // 根据按下的键执行相应的操作
  if (key === 'Enter') {
    // 执行提交表单的代码逻辑
  }
});

document.addEventListener('click', function(event) {
  // 获取鼠标点击的位置
  var x = event.clientX;
  var y = event.clientY;
  // 根据位置执行相应的操作
  // 比如展示弹出窗口
});

?通过监听输入事件，开发者可以根据用户的输入做出响应，实现更丰富和交互性的用户界面。

?-?键盘事件（KeyboardEvent）

1. keydown：当用户按下键盘上的任意键时触发该事件。按住键不松会不间断地触发该事件。
2. keyup：当用户释放键盘上的任意键时触发该事件。
3. keypress：当用户按下键盘上的可打印字符（字母、数字、标点符号等）时触发该事件。注意：keypress 事件不会捕获功能键（如 Shift、Ctrl 等）和操作键（如 Backspace、Delete 等）。

在键盘事件的事件处理函数中，可以通过事件对象来获取响应的按键信息和其他相关属性。常见的一些事件对象属性包括：

• event.key 或 event.code：获取按下的键的名称或代码（通常是一个字符串，比如 "A" 或 "Enter"）。
• event.keyCode 或 event.which：获取按下的键的值，是一个数字。
• event.ctrlKey、event.shiftKey、event.altKey、event.metaKey：这些布尔值属性用于判断是否按下了 Ctrl、Shift、Alt、Cmd（Windows 上的按键）键。

示例代码：

document.addEventListener('keydown', function(event) {
  // 按下任意键触发
  var key = event.key;
  var keyCode = event.keyCode;
  console.log('Key down:', key, keyCode);
});

document.addEventListener('keyup', function(event) {
  // 松开任意键触发
  var key = event.key;
  var keyCode = event.keyCode;
  console.log('Key up:', key, keyCode);
});

document.addEventListener('keypress', function(event) {
  // 按下可打印字符触发，不包括功能键和操作键
  var key = event.key;
  var keyCode = event.keyCode;
  console.log('Key press:', key, keyCode);
});

?在表单的输入框中，可以监听键盘事件来限制用户输入的字符类型；在游戏中，可以监听键盘事件来控制游戏的移动和操作等。

- 合成事件（CompositionEvent）

1. compositionstart：当用户在输入法中开始进行字符的输入时触发。这个事件在一次输入中只会触发一次。
2. compositionupdate：在输入法输入的过程中，每输入一个字符时触发一次该事件。
3. compositionend：当输入法输入完成一个字符后触发，或输入法输入结束时触发。

通过合成事件的事件对象，可以获取到正在组合输入的字符的信息、输入的字符串以及其他相关属性，以便进行相应的处理。

示例代码：

var textarea = document.getElementById('myTextarea');

textarea.addEventListener('compositionstart', function(event) {
  console.log('Composition start:', event.data);
});

textarea.addEventListener('compositionupdate', function(event) {
  console.log('Composition update:', event.data);
});

textarea.addEventListener('compositionend', function(event) {
  console.log('Composition end:', event.data);
});

以上代码是注册了三个合成事件的监听器，处理了输入法的开始、中间以及结束阶段的事件。在事件处理函数中，通过访问事件对象的属性，可以根据需要进行自定义的逻辑处理，比如显示输入进度、实时更新组合字符串等。?