Javascript中DOM事件监听（鼠标事件，键盘事件，表单事件）

#DOM（Document Object Model）事件监听是一种机制，它允许 JavaScript 代码在 HTML 文档中的元素上监听特定的事件。当这些事件发生时，与之关联的 JavaScript 函数（也称为事件处理函数）就会被执行。这使得网页能够对用户的交互行为做出响应，如点击按钮、按下键盘按键、提交表单等。#

一、监听鼠标事件

1.简介

当按下鼠标按键（左、右键均可）触发事件的发生。

属性	关系
mousedown	按下鼠标键时触发
mouseup	抬起鼠标键时触发
click	单击鼠标时触发
dblclick	在同一个元素上双击鼠标时触发
mouseenter	鼠标进入一个节点时触发，进入子节点不会触发这个事件
mouseleave	鼠标离开一个节点时触发，离开父节点不会触发这个事件
wheel	在浏览器窗口滚动鼠标滚轮时触发

2、mousedown 事件

这是最常见的鼠标事件之一。当用户在一个元素上按下并释放鼠标左键时触发。

<!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;}</style>
</head>
<body><div class="box" id="b1">事件</div><script>box = document.getElementById("b1");box.addEventListener( "click",function(){console.log("鼠标单击事件已触发");});</script>
</body>
</html>

代码运行后如下：

3.mousedown 和 mouseup 事件

当用户在一个元素上抬起和点击时鼠标左键时触发。

<!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;}</style>
</head>
<body><div class="box" id="b1">事件</div><script>box.addEventListener( "mousedown",function(){console.log("鼠标按下事件已触发");});box.addEventListener( "mouseup",function(){console.log("鼠标抬起事件已触发");});</script>
</body>
</html>

代码运行后如下:

4.dblclick 事件

当用户在一个元素上快速连续地两次点击鼠标左键时触发。

<!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;}</style>
</head>
<body><div class="box" id="b1">事件</div><script>box.addEventListener( "dblclick",function(){console.log("鼠标双击事件已触发");});</script>
</body>
</html>

代码运行后如下：

5.mouseenter 和 mouseleave 事件

mouseover事件在鼠标指针进入一个元素时触发，mouseout事件在鼠标指针离开一个元素时触发。

<!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;}</style>
</head>
<body><div class="box" id="b1">事件</div><script>box.addEventListener( "mouseenter",function(){console.log("鼠标进入节点事件已触发");});box.addEventListener( "mouseleave",function(){console.log("鼠标离开节点事件已触发");});</script>
</body>
</html>

代码运行后如下：

6. wheel 事件

在浏览器中滑动触发事件

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标事件</title><style>body {  height: 3000px; /* 增加浏览器页面高度以便滚动 */  }</style>
</head>
<body><script>box = document.getElementById("b1");// 窗口监听鼠标滚动window.addEventListener( "wheel",function(){console.log("鼠标滚动事件已触发");});</script></script>
</body>
</html>

代码运行后如下：

二、监听键盘事件

1、keydown事件

keydown事件在用户按下键盘上的一个键时触发，可以用于实现一些快捷键功能等。例如，在整个文档级别监听键盘事件：

<!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) {  console.log(`键盘 ${event.key}  被按下`)});  </script>  
</body>  
</html>

代码运行后如下：

2、keyup事件

keyup事件在用户释放键盘上的一个键时触发。可以用于实现一些快捷键功能等。

<!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');  // 监听整个文档的keyup事件  document.addEventListener( 'keyup',function(event) {  console.log(`键盘 ${event.key}  被按下`)});  </script>  
</body>  
</html>

代码运行后如下：

3、keycode事件

获取按键的代码（包括数字键和特殊键，如箭头键、功能键等），将按键信息添加到输出区域。

<!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');  // 监听整个文档的keyup事件  document.addEventListener( 'keydown',function(event) {  console.log(`键盘 ${event.key}  被抬起`)// 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）   const keyCode = event.key; // 将按键信息添加到输出区域  const message = `键盘 ${keyCode}  被按下`; outputDiv.textContent += message + '\n';  </script>  
</body>  
</html>

代码运行后如下：

4、解决自动滚动到输出区域

clientHeight 获取元素高度包括 padding 部分，但是不包括 border/margin
clientWidth 获取元素宽度包括 padding 部分，但是不包括 border/margin
scrollHeight 元素总高度，它包括 padding ，但是不包括 border/margin，包括溢出的不可见内容
scrollWidth 元素总宽度，它包括 padding ，但是不包括 border/margin ，包括溢出的不可见内容
scrollLeft 元素的水平滚动条向右滚动的像素数量
scrollTop 元素的垂直滚动条向下滚动的像素数量
outputDiv.scrollTop = outputDiv.scrollHeight;

三、监听表单事件

form对象（称表单对象或窗体对象）是document对象的子对象，提供一个让客户端输入文字或选择的功能。通过form对象可以访问表单对象的属性及方法

1、建立一个简单的表单

<!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></script>  
</body>  
</html>

2、获取表单元素

 const form = document.getElementById('myForm');

3、添加“表单提交”事件监听器

    <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>  
</body>  
</html>

代码运行后如下：

4、添加表单重置事件监听器

        form.addEventListener('reset', function(event) {  // 弹出警告框alert('表单已经重置! ');  });

代码运行后如下：

5、设置文本范围

（1）、获取文本输入框元素

const inputElement = document.getElementById('name');

（2）、添加 select 事件监听器

   inputElement.addEventListener('select', function(event) { });

（3）、输出选择的文本范围（起始位置和结束位置）

        inputElement.addEventListener('select', function(event) {  // 输出选择的文本范围（起始位置和结束位置） Event.target属性返回事件当前所在的节点 console.log('选中的文本范围:', event.target.selectionStart, event.target.selectionEnd);  });

（4）、获取并输出实际选中的文本

        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);  });

（5）、输出一条消息来表示事件已被触发

        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('输入框中的文本被选中了！！！');  });