JS的事件
事件是电脑输入设备与页面进行交互的相应，我们称之为事件
常用的事件
onload 加载完成事件; 页面加载完成后,常用于做页面js代码初始化操作
onclick 单击事件; 常用于按钮的点击响应操作
onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件 常用于表单提交前,验证所有表单项是否合法
事件注册（绑定）执行代码
事件响应后要执行那些代码
静态注册
通过html标签的事件属性直接赋予事件响应后的代码
动态注册
先通过js代码得到标签的dom对象，然后通过dom对象.事件名=function(){} 这种形式赋予事件
- 获取标签对象
- 标签对象.事件名 = function(){}
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/4.js"></script><!--通过script标签连接到文件的js-->
<title>事件</title>
</head>
<body >
<button onclick="onclickfun()">点击1</button>
<button id="btn02">点击2</button><br>
<button onblur="onblurFun()">失去焦点</button>
失去焦点<input type="text" id="btn03"><!--注意方法标签-->
<select onchange="onchangefun()">改变
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select id="btn04">改变
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<form action="http://localhost:8080" method="GET" onsubmit="return onsubmitFun();">
表单提交<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" method="GET" id="btn05">
表单提交<input type="submit" value="动态注册"/>
</form>
</body>
</html>JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63function onblurFun(){
//console是控制台对象，是由javascript语言提供,专门向浏览器的控制器打印输出，用于测试
//log()是打印的方法
console.log("静态失去焦点");
}
//
function onchangefun(){
//改变事件
alert("静态已经改变");
}
//静态注册onload
function onloadfun()
{
alert("静态加载");
}
onloadfun();
//动态注册onload加载
function onclickfun(){
alert("静态点击");
}
//验证表单提交项是否合法,阻止表单提交
function onsubmitFun(){
alert("表单不合法，请更新后重新提交");
return false;
}
//动态注册
window.onload = function(){//写在同一个中
alert("动态加载");
var btn05Obj = document.getElementById("btn05");
btn05Obj.onsubmit = function e (){
alert("表单合法，正在跳转指定页面");
//return false;阻止跳转
}
var btn04Obj = document.getElementById("btn04");
btn04Obj.onchange = function c (){
alert("动态已经改变");
}
var btn03Obj = document.getElementById("btn03");
btn03Obj.onblur = function b (){
console.log("动态失去焦点");
}
var btnObj = document.getElementById("btn02");//定义对象
// alert(btnObj);
btnObj.onclick = function a (){//定义方法
alert("动态点击");
}
}
//两个步骤 1.获取标签对象 2.通过标签对象.事件名=function(){}
//document 整个页面
//get 获取
//Element 元素
// by 通过
// id id属性
//var btnObj = document.getElementById("btn01");
// alert(btnObj)
// btnObj.onload = function ()
//alert("动态注册的onclick事件按钮")