一、概述
事件定义了用户与网页交互时产生的各种操作。例如，单击按钮时，就产生一个事件，告诉浏览器发生了需要进行处理的单击操作。为了使对象能够对某一事件做出响应，就必须编写事件处理函数。
事件处理函数是一段独立的程序代码，它在对象检测到某个特定事件时执行（响应该事件）。一个对象可以响应一个或多个事件，因此可以使用一个和多个事件过程对用户或系统的事件做出响应。
二、常用事件
（一）鼠标事件
是用户在网页上使用鼠标时触发的事件。
首先先用一个div盒子展示鼠标事件举例，代码如下：
<head>
<style>
.box{
width: 60px;
height: 30px;
background-color: aliceblue;
border: 2px solid black;
text-align: center;
}
body {
height: 3000px; /* 增加浏览器页面高度以便滚动 */
}
</style>
</head>
<body>
<div class="box" id="b1">
事件
</div>
</body>通过<script>标签设置JS监听鼠标事件。
1.mousedown 事件
按下鼠标左键时触发
<script>
//添加事件监听器
box = document.getElementById("b1");
// mousedown：按下鼠标键时触发
box.addEventListener( "mousedown",
function(){
console.log("鼠标按下事件已触发");
}
);
</script>运行结果如下：
2.mouseup 事件
抬起鼠标左键时触发
<script>
//添加事件监听器
box = document.getElementById("b1");
// mouseup：抬起鼠标键时触发
box.addEventListener( "mouseup",
function(){
console.log("鼠标抬起事件已触发");
}
);
</script>运行结果如下：
3.click 事件
单击鼠标左键时触发（由按下和抬起两个动作构成）
<script>
//添加事件监听器
box = document.getElementById("b1");
// click：单击鼠标时触发
box.addEventListener( "click",
function(){
console.log("鼠标单击事件已触发");
}
);
</script>运行结果如下：
4.dblclick 事件
在同一个元素上双击鼠标左键时触发 （由2个按下和2个抬起动作构成）
<script>
//添加事件监听器
box = document.getElementById("b1");
// dblclick：在同一个元素上双击鼠标时触发
box.addEventListener( "dblclick",
function(){
console.log("鼠标双击事件已触发");
}
);
</script>运行结果如下：
5.mouseenter 事件
鼠标进入一个节点时触发，进入子节点不会触发
<script>
//添加事件监听器
box = document.getElementById("b1");
// mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
box.addEventListener( "mouseenter",
function(){
console.log("鼠标进入节点事件已触发");
}
);
</script>运行结果如下：
6.mouseleave 事件
鼠标离开一个节点时触发，离开父节点不会触发
<script>
//添加事件监听器
box = document.getElementById("b1");
// mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
box.addEventListener( "mouseleave",
function(){
console.log("鼠标离开节点事件已触发");
}
);
</script>运行结果如下：
7.wheel 事件
在浏览器窗口滚动鼠标滚轮时触发
<script>
//添加事件监听器
box = document.getElementById("b1");
// wheel：在浏览器窗口滚动鼠标滚轮时触发
window.addEventListener( "wheel",
function(){
console.log("鼠标滚动事件已触发");
}
);
</script>运行结果如下：（滚动鼠标）
注意： 鼠标事件太多了，先不用全部学习，用到再学其他！！！不用记太多，忘了翻看回去。
（二）键盘事件
当用户在键盘上按键时会触发的事件。
1.keydown 事件
按下键盘时触发。
首先先用一个div盒子展示键盘事件举例，代码如下：
<head>
<style>
#output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
width: 300px;
height: 100px;
overflow-y: scroll;
/* 保持空白符和换行符 */
white-space: pre-wrap;
}
</style>
</head>
<body>
<div id="output"></div>
</body> 1.keydown 事件
按下键盘时触发
<script>
// 获取显示按键信息的元素
const outputDiv = document.getElementById('output');
// 监听整个文档的keydown事件
document.addEventListener('keydown',
function(event) {
// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）
const keyCode = event.key;
console.log(`键盘 ${keyCode} 被按下`);
}
);
</script> 注意：event.key 拿到键盘的值
运行结果如下：
当按下键盘上的某个键时，控制台会显示点击的按键
2.keyup 事件
抬起键盘时触发。
<script>
// 获取显示按键信息的元素
const outputDiv = document.getElementById('output');
// 监听整个文档的keyup事件
document.addEventListener('keyup',
function(event) {
// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）
const keyCode = event.key;
console.log(`键盘 ${keyCode} 被抬起`);
}
);
</script> 运行结果如下：
当按下键盘上的某个键后抬起时，控制台会显示抬起的按键 ，如果长按不放则不会显示
3.将按键信息添加到输出区域
<script>
// 获取显示按键信息的元素
const outputDiv = document.getElementById('output');
// 监听整个文档的keydown事件
document.addEventListener('keydown',
function(event) {
// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）
const keyCode = event.key;
// console.log(`键盘 ${keyCode} 被按下`);
// 将按键信息添加到输出区域
const message = `键盘 ${keyCode} 被按下`;
outputDiv.textContent += message + '\n';
// 自动滚动到输出区域的底部
// clientHeight 获取元素高度包括 padding 部分，但是不包括 border/margin
// clientWidth 获取元素宽度包括 padding 部分，但是不包括 border/margin
// scrollHeight 元素总高度，它包括 padding ，但是不包括 border/margin， 包括溢出的不可见内容
// scrollWidth 元素总宽度，它包括 padding ，但是不包括 border/margin ， 包括溢出的不可见内容
// scrollLeft 元素的水平滚动条向右滚动的像素数量
// scrollTop 元素的垂直滚动条向下滚动的像素数量
outputDiv.scrollTop = outputDiv.scrollHeight;
}
);
</script> 运行结果如下：
为了让用户能够及时看到最新的内容，我们可以设置自动滚动到输出区域底部。
- clientHeight 获取元素高度包括 padding 部分，但是不包括 border/margin
- clientWidth 获取元素宽度包括 padding 部分，但是不包括 border/margin
- scrollHeight 元素总高度，它包括 padding ，但是不包括 border/margin， 包括溢出的不可见内容
- scrollWidth 元素总宽度，它包括 padding ，但是不包括 border/margin ， 包括溢出的不可见内容
- scrollLeft 元素的水平滚动条向右滚动的像素数量
- scrollTop 元素的垂直滚动条向下滚动的像素数量
这中方法可以根据具体的使用场景和项目需求选择使用。例如，在聊天窗口或无限滚动加载场景中，自动滚动到底部可以提升用户体验。
（三）表单事件
1.概念
是指那些与表单相关的特定事件，这些事件在用户与表单交互时触发，允许开发者执行特定的操作或响应。
（1）设置一个简单的表单
代码如下：
<body>
<!-- 简单的HTML表单 -->
<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>
</body>（2）添加表单提交事件监听器
submit：提交事件
<script>
// 获取表单元素
const form = document.getElementById('myForm');
// 添加“表单提交”事件监听器
form.addEventListener('submit',
function(event) {
// 阻止表单的“默认提交行为” （即：将数据发送到表单的 action 属性指定的 URL，并在那里进行处理））
// 然而，在前端开发中，经常会有这样的需求：在表单提交之前进行一些客户端验证
// 在这些情况下，你需要阻止表单的默认提交行为。
// 比如： 你可以在提交表单之前检查用户输入的数据是否有效（如检查必填字段是否已填写，
// 电子邮件地址格式是否正确等）。如果数据无效，你可以显示错误消息而不提交表单
event.preventDefault(); // 阻止表单的“默认提交行为”
// 弹出警告框（在实际应用中，你可能会在这里进行AJAX请求或其他处理）
alert('表单提交按钮被按下! (但默认提交行为被截止了)');
// 你可以在这里添加其他代码来处理表单数据
// 例如，获取输入值：
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
console.log('Name:', name);
console.log('Email:', email);
}
);
</script> 运行结果如下：
当邮箱格式写错时则会弹出提示
更正后，点击提交弹出警告框
（3）添加表单重置事件监听器
reset：重置事件
在原有代码上添加此代码
// 添加表单重置事件监听器
form.addEventListener('reset',
function(event) {
// 弹出警告框
alert('表单已经重置! ');
}
);运行结果如下：
点击确认后重置表单
（4）获取文本输入框元素
select：选中事件
在原有代码上添加此代码
// 获取文本输入框元素
const inputElement = document.getElementById('name');
// 添加 select 事件监听器
inputElement.addEventListener('select',
function(event) {
// 输出选择的文本范围（起始位置和结束位置）
// Event.target属性返回事件当前所在的节点
console.log('选中的文本范围:', event.target.selectionStart, event.target.selectionEnd);
// 你也可以获取并输出实际选中的文本，但需要注意浏览器兼容性
// 以下代码在大多数现代浏览器中有效，但在某些旧版浏览器中可能不适用
// 注意： selectionEnd 属性返回的是选择范围的结束位置的下一个字符的索引
const selectedText = inputElement.value.substring(event.target.selectionStart, event.target.selectionEnd);
console.log('已选中文本:', selectedText);
// 对于更简单的用途，你可能只想输出一条消息来表示事件已被触发
alert('输入框中的文本被选中了！！！');
}
);运行结果如下：
