【超详细!】JavaScript的事件监听(监听鼠标事件、监听键盘事件、监听表单事件)
2025-01-29
在JavaScript中,事件监听用于检测页面上发生的特定事件,例如用户点击按钮、鼠标移动、键盘按键按下等。事件定义了用户与网页交互时产生的各种操作。
添加事件监听器的方法:
- 使用addEventListenter:它接受两个必需参数和一个可选参数。
1、第一个参数是要监听的事件类型,比如"click" (点击事件)、"mouseover"(鼠标移到元素上方事件)等,是字符串形式。
2、第二个参数是当事件发生时要执行的函数。
3、可选的第三个参数是一个布尔值。
<script>
const button = document.getEleventById("b1"); // 获取节点
button.addEventListenter("click", // 第一个参数
function(){ // 第二个参数
console.log("按钮被点击了") // 第三个参数
});
</script>
一、监听鼠标事件
常用的鼠标事件有MouseDown、MouseUp、MouseEnter、MouseLeave、 Click、DbClick及wheel等事件。
1、MouseDown事件
在按下鼠标左或右键时,就会发生MouseDown事件。例如:
<div class="box" id="b1">事件</div>
<script>
// 获取节点
box = document.getElementById("b1");
// 为某个节点添加事件监听器
box.addEventListener( "mousedown", // mousedown:按下鼠标键时触发
function(){
console.log("你的鼠标按下了!");
}
);
</script>
这里监听了div元素的mousedown事件,当你点击这个div时,会在控制台输出相应的信息。 图片显示:
2、MouseUp事件
当在元素上松开鼠标左或右键时,就会发生MouseUp事件。例如:
<div class="box" id="b1">事件</div>
<script>
box = document.getElementById("b1");
// mouseup:抬起鼠标键时触发
box.addEventListener( "mouseup",
function(){
console.log("你的鼠标抬起了!");
}
);
</script>
这里监听了div元素的mouseup事件,当你点击这个div后抬起时,会在控制台输出相应的信息(这个事件适用于普通按钮、网页及超链接)。图片显示:
3、MouseEnter事件
在鼠标指针进入该元素的边界时会触发mouseenter事件。例如:
<div class="box" id="b1">事件</div>
<script>
box = document.getElementById("b1");
// mouseenter:鼠标进入一个节点时触发,进入子节点不会触发这个事件
box.addEventListener( "mouseenter",
function(){
console.log("你的鼠标进入目标元素了!");
}
);
</script>
这里监听了div元素的mouseenter事件,当你的鼠标指针进入这个div的边界时,会在控制台输出相应的信息(这个事件适用于普通按钮、网页及超链接)。图片显示:
4、MouseLeave事件
与mouseenter事件相反,在鼠标指针离开该元素时会触发mouseleave事件。例如:
<div class="box" id="b1">事件</div>
<script>
box = document.getElementById("b1");
// mouseleave:鼠标离开一个节点时触发,离开父节点不会触发这个事件
box.addEventListener( "mouseleave",
function(){
console.log("你的鼠标离开目标元素了!");
}
);
</script>
这里监听了div元素的mouseleave事件,当你的鼠标指针离开div时,会在控制台输出相应的信息(这个事件适用于普通按钮、网页及超链接)。图片显示:
5、Click事件
当鼠标指针点击元素,然后松开鼠标左键时,就算完成一次click事件。例如:
<div class="box" id="b1">事件</div>
<script>
box = document.getElementById("b1");
box.addEventListener( "click",
function(){
console.log("你的鼠标单击了!");
}
); // click:单击鼠标时触发
</script>
这里监听了div元素的click事件,当你的鼠标单击div时,会在控制台输出相应的信息。图片显示:
6、DbClick事件
当鼠标指针连续两次点击松开,就算完成一次dbclick事件。例如:
<div class="box" id="b1">事件</div>
<script>
box = document.getElementById("b1");
box.addEventListener( "dbclick",
function(){
console.log("你的鼠标双击了!");
}
); // dbclick:双击鼠标时触发
</script>
这里监听了div元素的dbclick事件,当你的鼠标双击div时,会在控制台输出相应的信息。图片显示:
7、wheel事件
当鼠标滚轮转动时,就会发生wheel事件(以浏览器窗口滚动为例)。例如:
<script>
// 为浏览器窗口对象添加事件监听器:以滚动监听为例
window.addEventListener( "wheel", // wheel:在浏览器窗口滚动鼠标滚轮时触发
function(){
console.log("你的鼠标滚轮正在滚动...");
}
);
</script>
这里监听了浏览器窗口的wheel事件,当你的鼠标滚轮转动时,会在控制台输出相应的信息(这个事件适用于普通按钮、网页及超链接)。图片显示:
二、监听键盘事件
常见的键盘事件有keydown和keyup等事件。
1、KeyDown事件
在JavaScript中添加keydown(键按下时)的监听事件。例如
<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>
<script>
// keydown:按下键盘时触发
// 获取显示按键信息的div节点
const outputDiv = document.getElementById('output');
document.addEventListener( "keydown",
function(event){
console.log(`有键盘被按下: ${event.key}`);
}
)
</script>
给id 为output 的输入框添加了keydown(键按下时)键盘事件监听。当在输入框内操作键盘时,会在控制台输出相应信息,包括键码(通过event.key获取,不同的键对应不同的键码值)。 如图:
2、KeyUp事件
在JavaScript中添加keyup(键松开时)的监听事件。例如:
<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>
<script>
// keyup:抬起键盘时触发
// 获取显示按键信息的div节点
const outputDiv = document.getElementById('output');
document.addEventListener( "keyup",
function(event){
console.log(`有键盘松开: ${event.key}`);
}
)
</script>
给id 为output 的输入框添加了keyup(键按下时)键盘事件监听。当在输入框内操作键盘时,会在控制台输出相应信息,包括键码(通过event.key获取,不同的键对应不同的键码值)。 如图:
三、监听表单事件
在网页开发中,表单(如<form> 元素包含的各种输入框、下拉框、按钮等组件)。这是一个简单的表单。如图:
代码显示:
<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>
常见的表单监听事件包括submit事件、 reset事件、select事件等。
1、submit事件
当你点击表单中的提交按钮时,会触发submit事件。例如:
<script>
// 获取表单节点
const form = document.getElementById('myForm');
// 添加“表单提交”事件监听器
form.addEventListener('submit',
function(event) {
// 获取输入值:
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
console.log('Name:', name);
console.log('Email:', email);
}
);
如图:
在submit事件中也有阻止表单的“默认提交行为”。如图:
代码显示:
<script>
// 获取表单节点
const form = document.getElementById('myForm');
// 添加“表单提交”事件监听器
form.addEventListener('submit',
function(event) {
// 阻止表单的“默认提交行为” (即:将数据发送到表单的 action 属性指定的 URL,并在那里进行处理))
// 然而,在前端开发中,经常会有这样的需求:在表单提交之前进行一些客户端验证
// 在这些情况下,你需要阻止表单的默认提交行为。
// 比如: 你可以在提交表单之前检查用户输入的数据是否有效(如检查必填字段是否已填写,
// 电子邮件地址格式是否正确等)。如果数据无效,你可以显示错误消息而不提交表单
event.preventDefault(); // 阻止表单的“默认提交行为”
// 弹出警告框(在实际应用中,你可能会在这里进行AJAX请求或其他处理)
alert('表单提交按钮被按下! (但默认提交行为被截止了)');
}
);
</script>
2、reset事件
当你点击表单中的重置按钮时,会触发reset事件。例如:
<script>
const form = document.getElementById('myForm');
// 添加表单重置事件监听器
form.addEventListener('reset',
function(event) {
// 弹出警告框
alert('表单已经重置! ');
}
);
</script>
在按下“确定”键后会显示初始画面。
3、select事件
在JavaScript用于网页开发时,select事件通常用于检测用户在文本输入框
中选择文本内容的操作。例如:
<script>
// 1.获取姓名输入框节点
const inputElement = document.getElementById('name');
// // 2.为表单的姓名输入框添加 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('输入框中的文本被选中了!!!');
}
);
</script>
在上述代码中,给id 为name的输入框添加了select事件监听。当用户在该输入框内通过鼠标拖动或其他方式选择部分文本内容时,就会触发select事件,然后在控制台输出选中的具体内容(通过获取输入框当前值,并根据selectionStart和selectionEnd确定选中部分的起止位置来截取相应内容)。如图: