在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确定选中部分的起止位置来截取相应内容)。如图：
