一、对象的事件
对象的事件是指在一个对象上发生的特定动作或状态改变。对象可以是现实世界中的物体、概念、数据结构等。根据对象的类型和功能，可能会有不同类型的事件。
对象的事件一般由对象的方法或属性来处理和触发。通过定义对象的方法和属性，可以在对象上触发相应的事件，并通过事件处理器来处理这些事件。对象的事件可以用来实现对象之间的交互和协作，以及对对象的操作和状态的控制。
常见的对象事件包括：
- 表单事件：当用户点击一个可交互的对象（如按钮等）时触发。
- 键盘事件：当用户在键盘上按下或释放一个键时触发。
- 鼠标事件：当用户在对象上移动鼠标、点击鼠标按钮或滚动鼠标滚轮时触发。
- 定时事件：当到达指定的时间点或间隔时触发的事件，常用于定时任务和计时器功能。
对象的事件通常由事件监听器或事件处理器来监听和处理。事件监听器是一个特定的方法或函数，用于接收并处理特定的事件。当事件发生时，事件监听器会被调用，执行相应的操作。
二、监听鼠标事件
监听鼠标事件是指在程序中捕获和响应鼠标动作的事件。常见的鼠标事件包括鼠标点击、移动、滚轮滚动等。
常用的鼠标监听事件有：
mousedown：按下鼠标键时触发
mouseup：抬起鼠标键时触发
click：单击鼠标时触发
dblclick：在同一个元素上双击鼠标时触发
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
wheel：在浏览器窗口滚动鼠标滚轮时触发
1.首先创建一个事件对象，以便对其操作
<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>
2.获取它的节点，并为这个节点创建一个鼠标事件监听器对象或函数，用于处理鼠标事件。
mousedown：按下鼠标键时触发
box = document.getElementById("b1");
// 为某个节点添加事件监听器
box.addEventListener( "mousedown",
function(){
console.log("你的鼠标按下了！");
}
);当鼠标左键按下时就会在控制台打印如下结果：
mouseup：抬起鼠标键时触发
box.addEventListener( "mouseup",
function(){
console.log("你的鼠标抬起了！");
}
);当鼠标左键松开时就会在控制台打印如下结果： 
click：单击鼠标时触发
box.addEventListener( "click",
function(){
console.log("你的鼠标单击了！");
}
); 当单击时时就会在控制台打印如下结果：
dblclick：在同一个元素上双击鼠标时触发
box.addEventListener( "dblclick",
function(){
console.log("你的鼠标双击了！");
}
); 当单击时时就会在控制台打印如下结果：
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
box.addEventListener( "mouseenter",
function(){
console.log("你的鼠标进入目标元素了！");
}
);当鼠标移动到事件框时就会在控制台打印如下结果：
mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
box.addEventListener( "mouseleave",
function(){
console.log("你的鼠标离开目标元素了！");
}
);当鼠标移出事件框时就会在控制台打印如下结果：
wheel：在浏览器窗口滚动鼠标滚轮时触发（需要为浏览器窗口对象添加事件监听器）
window.addEventListener( "wheel",
function(){
console.log("你的鼠标滚轮正在滚动...");
}
);当鼠标滚轮滚动时就会在控制台打印如下结果：
三、监听键盘事件
常用的键盘事件有：
keydown：按下键盘时触发
keyup：抬起键盘时触发
1.首先创建一个事件对象，以便对其操作
<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> 
用上面这个框来存放输出的字符串
2.获取它的节点，并为这个节点创建一个键盘事件监听器对象或函数，用于处理键盘事件。
keydown：按下键盘时触发
// 获取显示按键信息的div节点
const outputDiv = document.getElementById('output');
// 监听整个文档的keydown事件
document.addEventListener('keydown',
function(event) {
// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）
const keyCode = event.key;
// 拼凑输出字符串
const message = `键盘 ${keyCode} 被按下`;
// 将拼凑好的字符串，添加到输出区域
outputDiv.textContent += message + '\n';
}
); 当按下键盘上的a,b,c就会出现以下结果：
keyup：抬起键盘时触发
document.addEventListener( "keyup",
function(event){
console.log(`有键盘按键抬起: ${event.key}`);
}
)当放开键盘上的a,b,c就会在控制台出现以下结果：
四、监听表单事件
常用的表单事件有：
submit：单击提交时触发
reset：单击重置时触发
select：选中文本时触发
1.首先创建一个表单事件对象，以便对其操作
<!-- 简单的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> 
2.获取它的节点，并为这个节点创建一个表单事件监听器对象或函数，用于处理表单事件。
submit：单击提交时触发
// 获取表单节点
const form = document.getElementById('myForm');
// 添加“表单提交”事件监听器
form.addEventListener('submit',
function(event) {
event.preventDefault(); // 阻止表单的“默认提交行为”
// 弹出警告框（在实际应用中，你可能会在这里进行AJAX请求或其他处理）
alert('表单提交按钮被按下! (但默认提交行为被截止了)');
// 你可以在这里添加其他代码来处理表单数据
// 例如，获取输入值：
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
console.log('Name:', name);
console.log('Email:', email);
}
); 其中阻止表单的“默认提交行为” （即：将数据发送到表单的 action 属性指定的 URL，并在那里进行处理））然而，在前端开发中，经常会有这样的需求：在表单提交之前进行一些客户端验证在这些情况下，你需要阻止表单的默认提交行为。
比如： 你可以在提交表单之前检查用户输入的数据是否有效（如检查必填字段是否已填写，电子邮件地址格式是否正确等）。如果数据无效，你可以显示错误消息而不提交表单
点击提交时出现以下结果：
reset：单击重置时触发
// 添加表单重置事件监听器
form.addEventListener('reset',
function(event) {
// 弹出警告框
alert('表单已经重置! ');
}
);点击重置时出现以下结果：
select：选中文本时触发
// 1.获取姓名输入框节点
const inputElement = document.getElementById('name');
// 2.为表单的姓名输入框添加 select 选中事件监听器
inputElement.addEventListener('select',
function(event) {
// 输出一条消息来表示事件已被触发
alert('输入框中的文本被选中了！！！');
}
);选中“李四”时就会运行出以下结果：
也可以输出选择的文本范围（起始位置和结束位置）
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);
}
);选中“李四”时控制台就会打印出以下结果：
五、定时事件
要监听定时事件，使用JavaScript中的 setInterval函数来设置定时器。
1.设置两个函数在控制台打印出定时任务
function func1(){
console.log("定时任务: 喝水！");
}
function func2(){
console.log("定时任务: 去超市买酱油！");
}2.使用 setInterval函数监听定时事件
// 每隔1000ms执行一次定时任务（无限重复）
setInterval(func1, 1000);
// 5秒以后（仅仅）执行一次定时任务！返回的是该定时器唯一编码，可利用该编码临时取消任务
const time_id = setTimeout(func2, 5000);
// 临时通知该定时器取消任务
clearTimeout(time_id);
// 你可以在这里继续执行其他代码，setTimeout 不会阻塞主线程
console.log("正在执行别的代码...");运行结果如下：
其中 函数1每隔1000ms执行一次定时任务（无限重复）；而函数2已被通知该定时器取消任务，所以不会执行，但是它以下的代码不会被阻塞，可以照样执行
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
