js中的事件
事件是电脑输入设备与页面进行交互的响应。
常用的事件：
onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
onclick 单击事件： 常用于按钮的点击响应操作。
onblur 失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
事件的注册：
什么是事件的注册（绑定）？
就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
-
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
-
动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。
动态注册基本步骤：
1、获取标签对象 2、标签对象.事件名 = fucntion(){}
和onload加载完成事件结合起来，有了onload动态注册才实现了后续其它事件的动态注册。
动态注册事件可以做到当页面加载完成后再执行script中的代码。
静态注册事件遵循从上到下依次执行，可能会出错。
1.onload加载完成事件
onload事件是浏览器解析完页面之后就会自动触发的事件。
1.1静态注册
onlaod属性 必须写在body标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
function onloadFun() {
alert('静态注册 onload 事件，所有代码');
}
</script>
</head>
<body onload="onloadFun()">
</body>
</html>
其实这里面function函数只有一句alert函数，是可以直接写的，就不用再写function函数了，区别看第7行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
</head>
<body onload="alert('静态注册 onload 事件，所有代码!')">
</body>
</html>
1.2动态注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
window.onload=function (){
//固定格式
alert('动态注册 onload 事件，所有代码');
}
</script>
</head>
<body> 这里就不用再写οnlοad=" "了
</body>
</html>
2.onclick单击事件
常用于按钮的点击响应操作。 也分为静态注册和动态注册：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
function onclickFun() {
alert('静态注册的 onclick 事件');
}
window.onload=function () {
var btn=document.getElementById("btn02");
btn.onclick =function () {
alert('动态注册的 onclick 事件');
}
}
</script>
</head>
<body>
<button onclick="onclickFun()">按钮1</button> //静态注册
<button id="btn02"> 按钮2 </button> //动态注册
</body>
</html>
3. onblur失去焦点事件
什么是失去焦点？
想象一下学习通的看视频过任务点时，每当鼠标离开视频界面视频就会暂停。
我们可以把视频看作一个焦点，鼠标离开后就是发生了一次失去焦点事件。
onblur事件在失去焦点后触发，分为静态触发和动态触发，常用于输入框失去焦点后验证其输入内容是否合法。
console 是控制台对象 ，是由 JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
log()是其打印的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
//静态注册失去焦点
function onblurFun() {
console.log("静态注册失去焦点事件");
alert('静态:离开文本框了，亲！');
}
//动态注册 onblur 事件
window.onload=function () {
var pwd=document.getElementById("passwd");
pwd.onblur=function () {
console.log('动态注册失去焦点事件');
alert('动态:离开文本框了，亲！');
}
}
</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()"> <br/>
密码：<input type="passwd" id="passwd"> <br/>
</body>
</html>
4. onchange 内容改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
//静态注册
function onchangeFun() {
alert('女神已经改变了');
}
//动态注册
window.onload=function () {
var sel=document.getElementById("select");
sel.onchange=function (){
alert('男神已经改变了');
}
}
</script>
</head>
<body>
请选择你心中的女神：
<select onchange="onchangeFun()">
<option>--女神--</option>
<option>dd</option>
<option>ee</option>
<option>ff</option>
</select>
<br/> <br/>
请选择你心中的男神：
<select id="select">
<option>--男神--</option>
<option>aa</option>
<option>bb</option>
<option>cc</option>
</select>
</body>
</html>
5. onsubmit 表单提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
function onsubmitFun() {
//假设这一部分内容要验证所有表单项是否合法，如果有一个不合法就输出提示，并阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return false; //返回false，阻止提交
}
window.onload=function (){
var fm=document.getElementById("form");
fm.onsubmit=function (){
//检查环节
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止 表单提交 -->
<form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="静态注册"/> <!-- 提交成功就跳转到百度-->
</form>
<form action="http://www.baidu.com" method="get" id="form">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>