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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="get" id="f">
			<input type="text" placeholder="请输入文本" id="i1"/>
			<input type="checkbox" id="i2"/>
			<input type="submit" value="提交"/>
			<input type="reset" value="重置"/>
		</form>
	</body>
</html>

<script type="text/javascript">
	//表单事件仅仅适用于表单操作以及表单类型的控件
	/*  在js中,事假大多都以on..开头
	 onfocus 当某个表单控件处于被选中状态的时候执行(获取焦点)
	 onblur  当某个表单控件取消被选中状态的时候执行(失去焦点)
	 
	 */
	i1.onfocus = function(){
//		console.log("获取焦点!!")
//		console.log(i1.value);
	}
	i2.onfocus = function(){
		console.log("复选框获取焦点!!")
	}
	i1.onblur = function(){
//		console.log("失去焦点!!");
	}
	
	//提交事件和重置事件  都是直接作用于  form 表单的!!!!!!
	//获取提交按钮点击事件
	//注意注意!!!!!!!!!!!!  
	f.onsubmit = function(){
		alert("哈哈哈哈哈哈哈哈哈哈或或");
	}
	
	f.onreset = function(){
		alert("重置按钮!!!");
	}
	//---------------------------
	//onchange 多用于下拉框事件!!!!
	i1.onchange = function(){
		//输入框中的值 跟上次点击的不一样  就会执行此事件!!!
		console.log("值改变啦!!!");
	}
	
</script>

前端三剑客
#JS
js中表单相关的事件
http://ultracode.cn/2020/12/01/JS/js中表单相关的事件/
作者
Win
发布于
2020年12月1日
许可协议