js_常用事件演示

✨前言✨

1.如果代码对您有帮助  欢迎点赞👍+收藏⭐哟   后面如有问题可以私信评论哟🗒️
2.博主后面将持续更新哟😘

🎉文章目录

🍔一、在JavaScript中什么是事件？
🍟二、为什么要使用事件
🌭三、常见事件的使用方法
🌮四、总结

🍔一、在JavaScript中什么是事件？

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

基本原理

当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。

🍟二、为什么要使用事件

在JavaScript中，事件用于响应用户的交互操作或其他类型的操作。通过事件，可以将某个特定的函数或代码与特定的事件相关联。以下是一些常见的原因，为什么需要使用事件：

1、交互响应：事件可以帮助我们在用户与页面交互时做出相应的动作。
2、用户交互：事件可以捕获用户的交互行为，例如点击、拖动、滚动等操作。
3、表单验证：可以使用事件来对用户输入进行验证。
4、动态页面：事件可以用于动态地改变页面的内容和外观。
5、异步操作：事件可以与异步操作（例如AJAX请求）结合使用，以便在操作完成时执行相应的处理函数。

🌭三、常见事件的使用方法

属性	作用
onclick	单击事件
ondblclick	双击事件
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onselect	文本被选中
onscroll	滚动条事件监听滚动条滑动的高度

代码演示如下：

单击事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function showMessage(){console.log("这是点击事件");}</script>
</head>
<body>
<input type="button" value="点击按钮" onclick="showMessage()" />
</body>
</html>

运行结果：

在这里插入图片描述

双击事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function showMessage(){console.log("这是双击事件");}</script>
</head>
<body>
<input type="button" value="双击按钮" ondblclick="showMessage()" />
</body>
</html>

运行结果：

在这里插入图片描述

鼠标被移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>window.onmousemove = function (){console.log("这是鼠标被移动");}</script>
</head>
<body></body>
</html>

运行结果：

在这里插入图片描述

鼠标从某元素移开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>window.onmouseout = function (){console.log("这是鼠标从某元素移开");}</script>
</head>
<body></body>
</html>

运行结果：

在这里插入图片描述

失去焦点和获得焦点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/*  窗口失去焦点时 */window.onblur = function (){console.log('窗口失去了焦点！')}/*  当窗口获得焦点时 */window.onfocus = function (){console.log('窗口获得了焦点！')}</script>
</head>
<body></body>
</html>

运行结果：

在这里插入图片描述

内容改变事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun1() {console.log('内容发生改变')}</script>
</head>
<body>
<input type="text" onchange="fun1()" oninput="fun1()">
</body>
</html>

运行结果：

在这里插入图片描述
onsubmit:为表单绑定提交事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/* 为表单绑定提交事件*/function fun1(){let userCode = document.getElementById('userCode').valuelet userPwd = document.getElementById('userPwd').valuevar reg = /^[A-Za-z0_9]{6,12}$/;console.log('触发了表单的提交事件!')if (userCode === ''){alert('账号不能为空')}else if (userCode.length < 6 || userCode.length > 12){alert('账号长度错误')}else if (!reg.test(userCode)){alert('账号只能为字母与数字')}else if (userPwd === ''){alert('密码不能为空')}else if (userPwd.length < 6 || userPwd.length > 12){alert('密码长度错误')}else if (!reg.test(userPwd)){alert('密码只能为字母与数字')}else {return true}return false}</script>
</head>
<body>
<form onsubmit="fun1()">
<input id="userCode" type="text"><br>
<input id="userPwd" type="password"><br>
<input type="submit" onsubmit="fun1()">
</form>
</body>
</html>

🌮四、总结

属性	解释
click	点击事件，当鼠标点击元素时触发。
mouseover	鼠标悬停事件，当鼠标指针进入元素时触发。
mouseout	鼠标离开事件，当鼠标指针离开元素时触发。
keydown	键盘按下事件，当按下键盘上的任意键时触发。
keyup	键盘松开事件，当释放键盘上的键时触发。
submit	表单提交事件，当用户提交表单时触发。
load	加载事件，当页面或某个元素完成加载时触发。
scroll	滚动事件，当页面滚动时触发。
resize	调整窗口大小事件，当调整浏览器窗口大小时触发。
focus	获取焦点事件，当元素获取焦点时触发。
blur	失去焦点事件，当元素失去焦点时触发。
change	值改变事件，当表单元素的值发生改变时触发。
dblclick	双击事件，当鼠标双击元素时触发。