DOM事件监听是指在网页开发中，通过 JS 等脚本语言来设置一种机制，用于检测和响应 DOM 元素上发生的特定事件的过程
（注：按F12可以调出控制台）
一、DOM事件监听的鼠标事件
在 DOM中，鼠标事件是指当用户使用鼠标与网页进行交互时触发的一系列事件，下面是一些属性的用法和作用：
| mousedown | 按下鼠标键时触发 |
| mouseup | 抬起鼠标键时触发 |
| click | 单击鼠标时触发 |
| dblclick | 在同一个元素上双击鼠标时触发 |
| mouseenter | 鼠标进入一个节点时触发，进入子节点不会触发这个事件 |
| mouseleave | 鼠标离开一个节点时触发，离开父节点不会触发这个事件 |
| wheel | 在浏览器窗口滚动鼠标滚轮时触发 |
1、按下鼠标键时触发
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件</title>
<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>
<script>
box = document.getElementById("b1");
box.addEventListener( "mousedown",
function(){
console.log("鼠标按下事件已触发");
}
);
</script>
</body>
</html>
运行结果：
2、抬起鼠标键时触发
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件</title>
<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>
<script>
box = document.getElementById("b1");
box.addEventListener( "mouseup",
function(){
console.log("鼠标抬起事件已触发");
}
);
</script>
</body>
</html>
运行结果：
3、单击鼠标时触发
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件</title>
<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>
<script>
box = document.getElementById("b1");
box.addEventListener( "click",
function(){
console.log("鼠标单击事件已触发");
}
);
</script>
</body>
</html>
运行结果：
4、在同一个元素上双击鼠标时触发
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件</title>
<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>
<script>
box = document.getElementById("b1");
box.addEventListener( "dblclick",
function(){
console.log("鼠标双击事件已触发");
}
);
</script>
</body>
</html>
运行结果：
5、鼠标进入一个节点时触发，进入子节点不会触发这个事件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件</title>
<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>
<script>
box = document.getElementById("b1");
box.addEventListener( "mouseenter",
function(){
console.log("鼠标进入节点事件已触发");
}
);
</script>
</body>
</html>
运行结果：
6、鼠标离开一个节点时触发，离开父节点不会触发这个事件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件</title>
<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>
<script>
box = document.getElementById("b1");
box.addEventListener( "mouseleave",
function(){
console.log("鼠标离开节点事件已触发");
}
);
</script>
</body>
</html>
运行结果：
7、在浏览器窗口滚动鼠标滚轮时触发
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标事件</title>
<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>
<script>
box = document.getElementById("b1");
window.addEventListener( "wheel",
function(){
console.log("鼠标滚动事件已触发");
}
);
</script>
</body>
</html>
运行结果：
二、DOM事件监听的键盘事件
在 DOM中，键盘事件用于响应用户在键盘上的操作，下面是一些属性的用法和作用：
| clientHeight | 获取元素高度包括 padding 部分，但是不包括 border/margin |
| clientWidth | 获取元素宽度包括 padding 部分，但是不包括 border/margin |
| scrollHeight | 元素总高度，它包括 padding ，但是不包括 border/margin， 包括溢出的不可见内容 |
| scrollWidth | 元素总宽度，它包括 padding ，但是不包括 border/margin ， 包括溢出的不可见内容 |
| scrollLeft | 元素的水平滚动条向右滚动的像素数量 |
| scrollTop | 元素的垂直滚动条向下滚动的像素数量 |
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘事件</title>
<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>
// 获取显示按键信息的元素
const outputDiv = document.getElementById('output');
// 监听整个文档的keydown事件
document.addEventListener(
'keydown',
function(event) {
// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）
const keyCode = event.key;
// 将按键信息添加到输出区域
const message = `键盘 ${keyCode} 被按下`;
outputDiv.textContent += message + '\n';
// 自动滚动到输出区域的底部
outputDiv.scrollTop = outputDiv.scrollHeight;
}
);
</script>
</body>
</html>
运行结果：
三、DOM事件监听的表单事件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单事件</title>
</head>
<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>
<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);
}
);
// 添加表单重置事件监听器
form.addEventListener('reset',
function(event) {
// 弹出警告框
alert('表单已经重置! ');
}
);
// 获取文本输入框元素
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('输入框中的文本被选中了！！！');
}
);
</script>
</body>
</html>
运行结果：
（注：如邮箱没有@符号，则会显示错误）