JavaScript中的事件
程序员文章站
2022-03-08 23:10:10
...
文章目录
1.什么是事件
事件是电脑输入设备与页面之间的交互的响应
输入设备：鼠标、键盘、写字板等。
交互：点击、滑动鼠标，用写字板，键盘打字等操作
2.事件的注册
什么叫事件的注册（绑定）？
就是告诉浏览器，事件响应后需要执行什么操作代码
2.1 静态注册
通过HTML标签的事件属性直接赋予事件响应后的代码，这种我们叫做静态注册
2.2 动态注册
先通过js代码获取标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋予响应后的代码，叫做动态注册
动态注册基本步骤：
1.获取标签的dom对象
2.dom对象.事件名 = function(){}
3.常用的事件
3.1 onload 加载完成事件
onload 事件是浏览器解析完页面后就会自动触发的事件
<!DOCTYPE html>
<html lang="CN">
<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>
<body>
<!--静态注册onload事件
<body onload = "onloadFun();">-->
</body>
</html>
3.2 onclick 单击事件
onclick 是单击事件，常用于“按钮”的点击响应操作
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//单击事件
//静态注册onclick事件
function onclickFun(){
alert('静态注册onclick事件')
}
//动态注册onclick事件
window.onclick = function (){
//获取标签对象
/**
* getElementById() 通过ID获取标签对象
*/
var btnObj = document.getElementById("btn01")
//alert(btnObj)
btnObj.onclick = function (){
alert('动态注册onclick事件')
}
}
</script>
</head>
<body>
<button onclick="onclickFun()">按钮1</button>
<button id="btn01" >按钮2</button>
</body>
</html>
点击按钮1，浏览器做出的响应
点击按钮2，浏览器做出的响应
3.3 onblur 失去焦点事件
常用于“输入框”失去焦点后验证其输入内容是否合法
//console是控制台对象，由js语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
//log是打印方法
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//onblur 失去焦点事件
//静态注册onblur事件
function onblurFun(){
console.log('静态注册失去焦点事件')
}
//动态注册失去焦点事件
window.onload = function (){
//1.获取标签对象
var passwordObj = document.getElementById("password");
//2.通过标签对象.事件名 = function(){};
passwordObj.onblur = function (){
console.log('动态注册失去焦点事件')
}
}
</script>
</head>
<body>
<!--创建输入框-->
用户名：<input type="text" onblur="onblurFun()"/><br/>
密码：<input id = 'password' type="text"/><br/>
</body>
</html>
点击用户名文本框，再敲击F12,console中会出现“静态注册失去焦点事件”
点击密码文本框，再敲击F12,console中会出现“动态注册失去焦点事件”
3.4 onchange 内容发生改变事件
常用于“下拉列表和输入框”内容发生改变后操作
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册内容发生改变事件
function onchangeFun(){
alert('你的女神改变了！')
}
window.onload = function (){
//动态注册内容发生改变事件，固定格式
// 1.获取标签对象
var selObj = document.getElementById("sel01");
//alert(selObj);
// 2.通过标签对象.对象名 = function(){}
selObj.onchange = function (){
alert('你的男神改变了！')
}
}
</script>
</head>
<body>
<!--静态注册内容发生改变事件-->
请选择你心中的女神
<select onchange="onchangeFun()">
<option>---女神---</option>
<option>范冰冰</option>
<option>刘亦菲</option>
<option>章子怡</option>
<option>张嘤嘤</option>
</select><br/>
<!--动态注册onchange事件-->
请选择你心中的男神
<select id="sel01">
<option>---男神---</option>
<option>刘德华</option>
<option>胡歌</option>
<option>梁朝伟</option>
<option>李小龙</option>
</select><br/>
优点1：<input type="text"/><br/>
优点2：<input type="text"/><br/>
</body>
</html>
在这里插入图片描述
3.5 onsubmit 表单提交事件
常用于“表单”提交前，验证所有表单项是否合法
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册表单提交事件
function nosubmitFun(){
//要验证所有表单项是否合法，如果有一个不合法就就不允许提交
alert('静态注册onsubmit事件-----发现不合格！');
return false;
}
//动态注册表单提交事件
window.onload = function () {
//1.获取标签对象
var subObj = document.getElementById("Id01");
//2.通过标签对象.对象名 = function(){}
subObj.onsubmit = function (){
alert('静态注册onsubmit事件-----发现不合格！');
return false;
}
}
</script>
</head>
<body>
<!--静态注册onsubmit事件-->
<form action="http://localhost:8080" method="get" onsubmit="return nosubmitFun()">
<input type="submit" value="静态注册">
</form>
<!--动态注册onsubmit事件-->
<form id="Id01" action="http://localhost:8080" method="get" >
<input type="submit" value="动态注册">
</form>
</body>
</html>
点击静态注册按钮
点击动态注册按钮