目录
事件监听概述
鼠标事件
mousedown
mouseup
click
dblclick
mouseenter
mouseleave
wheel
键盘事件
keydown
keyup
表单事件
提交事件
重置事件
选中事件
事件监听概述
事件监听与处理，用于在程序运行过程中实时监测和响应特定的事件。
事件是发生在程序中的某种特定行为或状态变化，比如用户点击按钮、键盘输入，点击鼠标等
事件监听就是程序通过注册特定的事件处理器，实时监听系统中可能发生的事件，比如当用户想进行页面更新，而做出的特定行为，这一行为就会被监听。
事件处理器，用于响应特定事件发生时的操作。当监听到特定事件发生时，系统会调用相应的事件处理器来处理该事件。事件处理器可以做一些特定的操作，比如更新界面、发送请求、保存数据等
鼠标事件
鼠标事件是指与鼠标交互时发生的动作或行为。常见的鼠标事件包括鼠标移动、鼠标点击、鼠标滚轮滚动等。这些事件可以被程序捕捉并做出相应的响应。例如，当鼠标点击一个按钮时，可以触发按钮的点击事件执行相应的操作。
| mousedown | 按下鼠标键时触发 |
| mouseup | 抬起鼠标键时触发 |
| click | 单击鼠标时触发 |
| dblclick | 在同一个元素上双击鼠标时触发 |
| mouseenter | 鼠标进入一个节点时触发，进入子节点不会触发这个事件 |
| mouseleave | 鼠标离开一个节点时触发，离开父节点不会触发这个事件 |
| wheel | 在浏览器窗口滚动鼠标滚轮时触发 |
进行事件监听首先要获取监听元素的节点，其次再对节点进行事件监听，设置函数用于处理特定的鼠标事件。
mousedown
鼠标按下监听 示例：
<style>
.test{ //给盒子设置样式
width: 100px;
height: 40px;
background-color: skyblue;
border-radius: 30px;
border: 2px black solid;
text-align: center;
font-size: 20px;
}
</style>
<body>
<div class="test" id="div1">鼠标事件</div>
<script>
one=document.getElementById("div1"); //获取要监听的节点
one.addEventListener("mousedown", //对获取的节点进行监听
function(){ //设置函数用于处理特定的鼠标事件
console.log("鼠标事件已触发")//此代码为清楚鼠标事件监听过程而设置，可去掉。
}
);
</script>
</body>鼠标按下六次看看鼠标监听的效果：
mouseup
one.addEventListener("mouseup",
function(){
console.log("鼠标抬起事件已触发")
}
);click
one.addEventListener("click",
function(){
console.log("鼠标单击事件已触发")
}
);dblclick
one.addEventListener("dblclick",
function(){
console.log("鼠标双击事件已触发")
}
);mouseenter
one.addEventListener("mouseenter",
function(){
console.log("鼠标进入节点事件已触发")
}
);mouseleave
one.addEventListener("mouseleave",
function(){
console.log("鼠标离开节点事件已触发")
}
);wheel
one.addEventListener("wheel",
function(){
console.log("鼠标滚轮事件已触发")
}
);以上即为鼠标事件常用的几个标签
键盘事件
键盘事件可以用于检测用户的键盘输入，并根据输入进行相应的操作或响应。例如，在游戏中可以使用键盘事件来控制角色的移动或触发特定的动作。
| keydown |
按下键盘时触发 |
| keyup | 抬起键盘时触发 |
| event.key | 拿到键盘的值 |
keydown
键盘监听 示例
<script>
//监听整个文档的keydown事件
document.addEventListener(
`keydown`,
function(event){
// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）
keyCode=event.key;
//输出键盘监听效果（可去掉）
console.log(`键盘 ${keyCode} 被按下`)
}
)
</script>键盘输入over 看看键盘监听的效果：
keyup
<script>
document.addEventListener(
`keyup`,
function(event){
keyCode=event.key;
console.log(`键盘 ${keyCode} 抬起`)
}
)
</script>表单事件
表单事件是指在用户对HTML表单进行操作时触发的一系列事件，例如：提交表单，重置表单...
| submit | 提交事件 |
| reset | 重置事件 |
| select | 选中事件 |
提交事件
尝试设置 对表单进行阻止表单提交：
一个简单的表单
<form id="myForm">
姓名: <input type="text" id="name" value="输入你的姓名"> <br>
邮箱: <input type="email" id="email" value="输入你的邮箱"> <br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<script>
//获取表单节点
test=document.getElementById("myForm")
// 添加表单提交事件监听器
test.addEventListener(`submit`,
function(event){
//阻止表单的“默认提交行为”
event.preventDefault();
//用于提示用户表单提交行为被驳回(可去掉)
alert("表单提交按钮被按下! (但默认提交行为被截止了)")
}
);
</script>提交表单被驳回 
preventDefault：
阻止表单的 “默认提交行为” （即：将数据发送到表单的 action 属性指定的 URL，并在那里进行处理））
在前端开发中，经常会有这样的需求：在表单提交之前进行一些客户端验证，比如：提交表单之前检查用户输入的数据是否有效（填字段是否已填写，电子邮件地址格式是否正确等），这时就需要阻止表单的默认提交行为。
那么如何在提交表单之前检查用户输出数据是否有效呢？
可以通过 获取用户的输入值 然后在后台进行确认，那么来尝试一下获取输入值吧
<script>
test=document.getElementById("myForm")
test.addEventListener(`submit`,
function(event){
event.preventDefault();
alert("表单提交按钮被按下! (但默认提交行为被截止了)")
//获取输入值：
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
//在后台打印出用户输入值
console.log('Name:', name);
console.log('Email:', email);
}
);
</script>
在后台获取用户输入值
重置事件
添加表单重置事件监听器
// 添加表单重置事件监听器
test.addEventListener('reset',
function(event) {
// 弹出重置警告框，告知用户表单已重置
alert('表单已经重置! ');
}
);
选中事件
Event.target 返回事件当前所在的节点
selectionStart 返回的是选择范围的起始位置的字符的索引
selectionEnd 返回的是选择范围的结束位置的下一个字符的索引
substring 用于从字符串中提取特定部分并返回新的子字符串的一种常用方法。
substring 示例：
var a = "abcdefghijklmn";
var b = str.substring(2, 6);
console.log(b); // 输出: "cdef"提示用户选中了输入框内的文本
// 获取文本输入框元素
const inputElement = document.getElementById('name');
// 添加 select 事件监听器
inputElement.addEventListener('select',
function(event) {
alert('输入框中的文本被选中了！！！');
}
);
获取用户选中的 文本 及 文本范围：
// 获取文本输入框元素
const inputElement = document.getElementById('name');
// 添加 select 事件监听器
inputElement.addEventListener('select',
function(event) {
// 输出选择的文本范围（起始位置和结束位置）
console.log('选中的文本范围:', event.target.selectionStart, event.target.selectionEnd);
// 输出选择的文本（起始位置和结束位置）
const selectedText = inputElement.value.substring(event.target.selectionStart, event.target.selectionEnd);
console.log('已选中文本:', selectedText);
}
);
获取用户选中的 文本范围 及 文本