【超详细！】JavaScript的事件监听（监听鼠标事件、监听键盘事件、监听表单事件）
在JavaScript中，事件监听用于检测页面上发生的特定事件，例如用户点击按钮、鼠标移动、键盘按键按下等。事件定义了用户与网页交互时产生的各种操作。
添加事件监听器的方法：
使用addEventListenter：它接受两个必需参数和一个可选参数。
1、第一个参数是要监听的事件类型，比如"click" (点击事件)、"mouseover"(鼠标移到元素上方事件)等，是字符串形式。 2、第二个参数是当事件发生时要执行的函数。 3、可选的第三个参数是一个布尔值。
一、监听鼠标事件
常用的鼠标事件有MouseDown、MouseUp、MouseEnter、MouseLeave、 Click、DbClick及wheel等事件。
1、MouseDown事件
在按下鼠标左或右键时，就会发生MouseDown事件。例如：
这里监听了div元素的mousedown事件，当你点击这个div时，会在控制台输出相应的信息。 图片显示：
2、MouseUp事件
当在元素上松开鼠标左或右键时，就会发生MouseUp事件。例如：
这里监听了div元素的mouseup事件，当你点击这个div后抬起时，会在控制台输出相应的信息（这个事件适用于普通按钮、网页及超链接）。图片显示：
3、MouseEnter事件
在鼠标指针进入该元素的边界时会触发mouseenter事件。例如：
这里监听了div元素的mouseenter事件，当你的鼠标指针进入这个div的边界时，会在控制台输出相应的信息（这个事件适用于普通按钮、网页及超链接）。图片显示：
4、MouseLeave事件
与mouseenter事件相反，在鼠标指针离开该元素时会触发mouseleave事件。例如：
这里监听了div元素的mouseleave事件，当你的鼠标指针离开div时，会在控制台输出相应的信息（这个事件适用于普通按钮、网页及超链接）。图片显示：
5、Click事件
当鼠标指针点击元素，然后松开鼠标左键时，就算完成一次click事件。例如：
这里监听了div元素的click事件，当你的鼠标单击div时，会在控制台输出相应的信息。图片显示：
6、DbClick事件
当鼠标指针连续两次点击松开，就算完成一次dbclick事件。例如：
这里监听了div元素的dbclick事件，当你的鼠标双击div时，会在控制台输出相应的信息。图片显示：
7、wheel事件
当鼠标滚轮转动时，就会发生wheel事件（以浏览器窗口滚动为例）。例如：
这里监听了浏览器窗口的wheel事件，当你的鼠标滚轮转动时，会在控制台输出相应的信息（这个事件适用于普通按钮、网页及超链接）。图片显示：
二、监听键盘事件
常见的键盘事件有keydown和keyup等事件。
1、KeyDown事件
在JavaScript中添加keydown(键按下时）的监听事件。例如
给id 为output 的输入框添加了keydown(键按下时)键盘事件监听。当在输入框内操作键盘时，会在控制台输出相应信息，包括键码(通过event.key获取，不同的键对应不同的键码值)。 如图：
2、KeyUp事件
在JavaScript中添加keyup(键松开时）的监听事件。例如：
给id 为output 的输入框添加了keyup(键按下时)键盘事件监听。当在输入框内操作键盘时，会在控制台输出相应信息，包括键码(通过event.key获取，不同的键对应不同的键码值)。 如图：
三、监听表单事件
在网页开发中，表单(如
常见的表单监听事件包括submit事件、 reset事件、select事件等。
1、submit事件
当你点击表单中的提交按钮时，会触发submit事件。例如：
2、reset事件
当你点击表单中的重置按钮时，会触发reset事件。例如：
在按下“确定”键后会显示初始画面。
3、select事件
在JavaScript用于网页开发时，select事件通常用于检测用户在文本输入框 中选择文本内容的操作。例如：
在上述代码中，给id 为name的输入框添加了select事件监听。当用户在该输入框内通过鼠标拖动或其他方式选择部分文本内容时，就会触发select事件，然后在控制台输出选中的具体内容(通过获取输入框当前值，并根据selectionStart和selectionEnd确定选中部分的起止位置来截取相应内容)。如图：
