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