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

一只java小菜鸡

已于 2023-08-18 10:48:32 修改

阅读量727

点赞数

分类专栏：前端文章标签： javascript 计算机外设开发语言 js事件

于 2023-08-16 14:54:34 首次发布

本文链接：https://blog.csdn.net/qq_56921846/article/details/132318899

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

鼠标事件：单击（click）、双击（dblclick）、鼠标移动（mousemove）、鼠标悬停（mouseover）、鼠标离开（mouseout）等。
键盘事件：按键（keydown）、释放键（keyup）等。
表单事件：提交表单（submit）、重置表单（reset）、输入（input），改变（change）、获得焦点（focus）、失去焦点（blur）等。
文档事件：加载完成（load）、窗口大小改变（resize）、关闭页面（unload）等。

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

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

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

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

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

<html>

<body>
//鼠标悬停该按钮时显示提示
<button id="btn">查询</button> 

//通过span做提示，默认为display：none
<span id="info" style="display:none">一个查询按钮</span>

</body>
</html>


<script>
        var info=document.getElementById("info")
        var btn =document.getElementById("btn")
        btn.onmouseover=function(){
            //鼠标悬停时，提示文字显示出来
            info.style.display="inline-block"；
    }
        btn.onmouseout=function(){
            //鼠标离开时，提示文字隐藏
            info.style.display=""；
    }

</script>

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

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

submit事件：表单提交时触发。
reset事件：表单重置时触发。
input事件：输入框内容改变时触发。
change事件：表单元素的值发生改变时触发（例如复选框、下拉列表等）。
focus事件：获得焦点时触发（点击输入框：input textarea）；
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：

<input type='text' name='username' oninput='changeINfo()' />




js:

function changeInfo(){

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

}

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

文档事件

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

举个例子：

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

<script>
    window.onload=function(){

    //这里我们可以初始化查询一个后端数据
    ajax。。。
    //也可以在界面刚打开时进行一个操作（打开一个广告界面。。。）
    //我们拿一个弹出框模拟一下
    alert("xxx")
}

</script>

一只java小菜鸡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js中的常见事件（鼠标事件，键盘事件，表单事件......）

通过注册事件监听器（Event Listener），可以为网页元素（例如按钮、链接等）添加事件处理器（Event Handler），当事件发生时，事件处理器会被调用执行相应的代码。鼠标事件：单击（click）、双击（dblclick）、鼠标移动（mousemove）、鼠标悬停（mouseover）、鼠标离开（mouseout）等。表单事件：提交表单（submit）、重置表单（reset）、输入（input），改变（change）、获得焦点（focus）、失去焦点（blur）等。我们说一下load事件；
复制链接

扫一扫