✨前言✨
1.如果代码对您有帮助 欢迎点赞+收藏⭐哟 后面如有问题可以私信评论哟️
2.博主后面将持续更新哟
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>Titletitle>
<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>Titletitle>
<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>Titletitle>
<script>
window.onmousemove = function (){
console.log("这是鼠标被移动");
}
script>
head>
<body>
body>
html>
运行结果:
鼠标从某元素移开
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
window.onmouseout = function (){
console.log("这是鼠标从某元素移开");
}
script>
head>
<body>
body>
html>
运行结果:
失去焦点和获得焦点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>Titletitle>
<script>
function fun1() {
console.log('内容发生改变')
}
script>
head>
<body>
<input type="text" onchange="fun1()" oninput="fun1()">
body>
html>
运行结果:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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开头的属性来绑定相应的处理函数。