js中的常见事件（鼠标事件，键盘事件，表单事件......）

JavaScript中的事件(Event)是指在网页中发生的某些特定操作（例如单击、加载页面等），可以被JavaScript代码捕获和处理。常见的事件有：

1. 鼠标事件：单击（click）、双击（dblclick）、鼠标移动（mousemove）、鼠标悬停（mouseover）、鼠标离开（mouseout）等。

2. 键盘事件：按键（keydown）、释放键（keyup）等。

3. 表单事件：提交表单（submit）、重置表单（reset）、输入（input），改变（change）、获得焦点（focus）、失去焦点（blur）等。

4. 文档事件：加载完成（load）、窗口大小改变（resize）、关闭页面（unload）等。

通过注册事件监听器（Event Listener），可以为网页元素（例如按钮、链接等）添加事件处理器（Event Handler），当事件发生时，事件处理器会被调用执行相应的代码。

例如，下面的代码使用addEventListener()方法为一个按钮添加单击事件的处理函数：

鼠标事件是最常用的事件，通常我们的前后端交互都是通过点击事件来完成的。

const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log('按钮被单击了！');
});

鼠标悬停事件：鼠标悬停时弹出信息提示

//鼠标悬停该按钮时显示提示
查询 

//通过span做提示，默认为display：none
一个查询按钮

本文着重说一下表单时间。

表单事件是指在表单元素中发生的事件，例如提交表单、重置表单、输入等。常用的表单事件有：

1. submit事件：表单提交时触发。

2. reset事件：表单重置时触发。

3. input事件：输入框内容改变时触发。

4. change事件：表单元素的值发生改变时触发（例如复选框、下拉列表等）。

5. focus事件：获得焦点时触发（点击输入框：input textarea）；

6. blur事件：失去焦点时触发（当在输入框中输入文本之后切换至下一个输入框，上面这个就会失去焦点）

这些事件可以通过addEventListener()方法来注册事件监听器，例如：

const form = document.querySelector('form');
const input = document.querySelector('input');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  console.log('表单已提交！')
});

input.addEventListener('input', function(event) {
  console.log('输入框内容已改变：', event.target.value);
});

也可以通过给html标签直接添加事件完成

html：






js:

function changeInfo(){

    //实时显示输入框中的输入字数
    console.log(document.getElementByName("username")[0].value.length)

}

在submit事件的处理函数中，可以使用event对象的preventDefault()方法阻止表单的默认提交行为，从而实现自定义表单行为。在input事件的处理函数中，可以通过event.target.value获取输入框的当前值，并在控制台中输出。

文档事件

我们说一下load事件；load事件是在页面初始化时调用，常用于初始化界面的数据（一个查询列表的初始化显示查询）。

举个例子：

在刚打开界面时给出一个弹出框