05 js中的事件
js中的事件
什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件：
onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
一、事件的注册
事件的注册又分为静态注册和动态注册两种：
什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = fucntion(){}
1.1 onload 加载完成事
示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//onload事件的方法
function onloadfun(){
alert('静态注册onload事件,所有代码')
}
//onload事件动态注册，是固定写法
window.onload = function (){
alert("动态注册的onload事件");
}
</script>
</head>
<!--静态注册onload事件
onload事件是浏览器解析页面之后就会自动触发的事件
<body onload="alert('静态注册onload事件');alert('还能写，太麻烦，')">
<body onload="onloadfun()">
-->
<body >
</body>
</html>
1.2 onclick 单击事件
示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickfun(){
alert("静态注册onclick事件")
}
window.onclick = function (){
//1.获取标签对象
/*
* document 是JavaScript语言提供的一个对象(文档)
* get 获取
* Element 元素(就是标签)
* By 通过
* Id id属性
*
* getElementById 通过id属性获取标签对象
* */
var btnobj = document.getElementById("btn001");
//alert(btnobj);
//2.通过标签对象.事件名 = function(){}
btnobj.onclick = function (){
alert("动态注册的onclick事件")
}
}
</script>
</head>
<body>
<button onclick="onclickfun()">按钮1</button>
<button id="btn001">按钮2</button>
</body>
</html>
1.3 onblur 失去焦点事件
示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onblurfun(){
//console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制台打印输出，用于测试使用
//log()是打印的方法
console.log("静态注册失去焦点事件");
}
window.onblur = function (){
//1.获取标签对象
var passobj = document.getElementById("password");
//对象.事件名 = function(){}
passobj.onblur = function (){
console.log("动态失去焦点事件");
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurfun()"/><br/>
密码：<input type="text" id="password"/><br/>
</body>
</html>
1.4 onchange 内容发生改变事件
示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangefun(){
alert("女神改变了");
}
window.onchange = function(){
//1.获取标签对象
var selobj = document.getElementById("sel01");
//对象.事件名 = function(){}
selobj.onchange = function (){
alert("男神改变了");
}
}
</script>
</head>
<body>
<select onchange="onchangefun()">
<option>---你的女神---</option>
<option>小红</option>
<option>小芳</option>
<option>欢欢</option>
</select>
<select id="sel01">
<option>---你的男神---</option>
<option>洋洋</option>
<option>哈哈</option>
<option>呼呼</option>
</select>
</body>
</html>
1.5 onsubmit 表单提交事件
示例代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onsubmitfun(){
//要验证所有表单项是否合法，如果有一个不合法就组织表单提交
alert("静态注册表单提交事件---发现不合法");
return false;
}
window.onsubmit = function (){
//1.获取标签对象
var formobj = document.getElementById("form01");
//对象.事件名 = function(){}
formobj.onsubmit = function (){
//要验证所有表单项是否合法，如果有一个不合法就组织表单提交
alert("动态注册表单提交事件---发现不合法");
return false;
}
}
</script>
</head>
<body>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitfun()">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" >
<input type="submit" value="动态注册" id="form01"/>
</form>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）