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：当 、