✨前言✨
1.如果代码对您有帮助 欢迎点赞👍+收藏⭐哟 后面如有问题可以私信评论哟🗒️
2.博主后面将持续更新哟😘
🍔一、在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').value
let userPwd = document.getElementById('userPwd').value
var 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 | 双击事件，当鼠标双击元素时触发。 |
这些事件可以通过addEventListener方法或者直接在HTML元素中使用on开头的属性来绑定相应的处理函数。
