除了点击事件，`addEventListener` 还能用于处理哪些事件类型？

addEventListener 是JavaScript中用于为元素添加事件监听器的强大方法，除了点击事件外，它还能用于处理多种类型的事件

鼠标事件

• mousedown：当鼠标按钮在元素上按下时触发。例如，可以通过监听此事件来实现一些拖拽功能，当用户按下鼠标按钮时开始记录鼠标的位置，以便后续计算拖拽的距离。

  const element = document.getElementById('myElement');
  element.addEventListener('mousedown', function(event) {
       
  console.log('鼠标按下在元素上');
  // 可以在这里记录鼠标按下时的位置等信息
  });
  

• mouseup：当在元素上按下的鼠标按钮被释放时触发。与 mousedown 事件配合使用，可用于确定拖拽操作的结束等场景。

  element.addEventListener('mouseup', function() {
       
  console.log('鼠标按钮在元素上释放');
  });
  

• mousemove：当鼠标指针在元素内部移动时触发。常用于实现鼠标跟随效果、绘制图形等交互功能。例如，在一个画布上监听 mousemove 事件，根据鼠标的移动轨迹来绘制线条。

  const canvas = document.getElementById('myCanvas');
  canvas.addEventListener('mousemove', function(event) {
       
  console.log('鼠标在画布上移动，当前位置：', event.clientX, event.clientY);
  // 在这里可以根据鼠标位置进行绘制等操作
  });
  

• mouseover：当鼠标指针进入元素的边界时触发。可以用于显示提示信息或改变元素的样式等，以提供视觉反馈。

  const tooltipElement = document.getElementById('tooltip');
  const targetElement = document.getElementById('myTarget');
  targetElement.addEventListener('mouseover', function() {
       
  tooltipElement.style.display = 'block';
  });
  

• mouseout：当鼠标指针离开元素的边界时触发。与 mouseover 事件相对应，可用于隐藏提示信息或恢复元素的原始样式。

  targetElement.addEventListener('mouseout', function() {
       
  tooltipElement.style.display = 'none';
  });
  

键盘事件

• keydown：当键盘上的键被按下时触发。可以用于监听用户的键盘输入，实现快捷键功能、表单验证等。例如，在一个文本输入框中监听 keydown 事件，当用户按下回车键时提交表单。

  const inputElement = document.getElementById('myInput');
  inputElement.addEventListener('keydown', function(event) {
       
  if (event.key === 'Enter') {
       
    console.log('用户按下了回车键');
    // 在这里可以执行提交表单等操作
  }
  });
  

• keyup：当键盘上按下的键被释放时触发。与 keydown 事件结合使用，可以更精确地判断用户的键盘操作，例如实现连续按键的检测等。

  inputElement.addEventListener('keyup', function(event) {
       
  console.log('用户释放了键盘上的键：', event.key);
  });
  

表单事件

• submit：当表单被提交时触发。通常用于在表单提交前进行数据验证或执行一些额外的处理逻辑，如检查必填项是否填写完整、验证邮箱格式等。

  const formElement = document.getElementById('myForm');
  formElement.addEventListener('submit', function(event) {
       
  event.preventDefault(); // 阻止表单默认提交行为
  const inputValue = document.getElementById('myInput').value;
  if (inputValue === '') {
       
    console.log('表单输入不能为空');
  } else {
       
    console.log('表单提交成功');
    // 在这里可以进行表单数据的提交操作
  }
  });
  

• input：当 <input>、<textarea> 等表单元素的内容发生变化时触发。可用于实时验证表单输入、动态更新相关的提示信息等。

  const inputElement = document.getElementById('myInput');
  inputElement.addEventListener('input', function() {
       
  const value = inputElement.value;
  if (value.length > 10) {
       
    console.log('输入内容过长');
  } else {
       
    console.log('输入内容：', value);
  }
  });
  

窗口事件

• load：当页面及其所有资源（如图片、脚本等）完全加载完成时触发。常用于在页面加载完成后执行一些初始化操作，如加载数据、初始化插件等。

  window.addEventListener('load', function() {
       
  console.log('页面已完全加载');
  // 在这里可以进行页面初始化的相关操作
  });
  

• resize：当浏览器窗口的大小发生变化时触发。可用于实现响应式布局，根据窗口大小调整页面元素的样式或布局。

  window.addEventListener('resize', function() {
       
  const windowWidth = window.innerWidth;
  const windowHeight = window.innerHeight;
  console.log('窗口大小已改变，宽度：', windowWidth, '高度：', windowHeight);
  // 在这里可以根据窗口大小调整页面布局等
  });
  

触摸事件（适用于移动设备）

• touchstart：当手指触摸屏幕时触发。类似于鼠标的 mousedown 事件，可用于处理触摸开始的交互逻辑，如在移动设备上实现触摸按钮的按下效果等。

  const touchElement = document.getElementById('myTouchElement');
  touchElement.addEventListener('touchstart', function(event) {
       
  console.log('手指触摸屏幕在元素上');
  // 可以在这里记录触摸点的位置等信息
  });
  

• touchend：当手指离开屏幕时触发。类似于鼠标的 mouseup 事件，可用于确定触摸操作的结束等场景。

  touchElement.addEventListener('touchend', function() {
       
  console.log('手指离开屏幕');
  });
  

• touchmove：当手指在屏幕上移动时触发。类似于鼠标的 mousemove 事件，可用于实现触摸滑动效果、移动元素等交互功能。

  const touchableElement = document.getElementById('myTouchableElement');
  touchableElement.addEventListener('touchmove', function(event) {
       
  console.log('手指在屏幕上移动，当前位置：', event.touches[0].clientX, event.touches[0].clientY);
  // 在这里可以根据触摸位置移动元素等操作
  });
  

addEventListener 能够处理的事件类型非常丰富，涵盖了各种用户交互和页面状态变化的场景，通过合理地使用这些事件类型，可以为网页或应用程序添加丰富多样的交互效果和功能。