js事件的分类

最新推荐文章于 2024-03-25 14:32:41 发布

\u5f20\u7231\u9648

最新推荐文章于 2024-03-25 14:32:41 发布

阅读量373

点赞数

本文链接：https://blog.csdn.net/family_love_1998/article/details/89764634

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用事件的分类</title>
<script>
/**
 * js----->表单验证
 * js事件的分类
 * 		1)和点击相关的事件
 * 				onclick :单击点击事件
 * 				ondbclick:双击点击事件
 * 		2)和焦点相关的事件:应用场景:表单校验
 * 				onfocus:获取焦点事件
 * 				onblur:失去焦点事件
 * 		3)和选项卡发生变化相关的事件
 * 			onchange事件  :应用下拉菜单:  省市联动
 *      4)和鼠标相关的事件
 * 			onmouseover:鼠标经过事件
 * 			onmouseout:鼠标移出事件
 *     5)页面载入事件: body 中的内容全部加载完毕触发这个方法
 * 					
 * 
 * 
 */
function testDbClick(){
	alert("触发了双击事件") ;
}

function testFocus(){
	
	//获取当前的input标签对象
	var username = document.getElementById("username") ;
	//设置他的value属性
	username.value="" ;
}

function testBlur(){
	//获取用户输入的内容
	var username = document.getElementById("username").value ;
	//获取span标签对象
	var span = document.getElementById("usernameTip") ;
	//需求:如果用户名的内容不是"eric",校验通过
	if(username!="eric"){
		//设置span标签的innerHTML属性
		span.innerHTML ="当前用户名可以".fontcolor("yellowgreen") ;
	}else{
		span.innerHTML ="当前用户名重复,请重新输入".fontcolor("red") ;
	}
}


//和选项卡变化的监听器
function testChange(){
	//获取选中的内容
	var jiguan = document.getElementById("jiguan").value ;
//	alert(jiguan) ;
	//获取id="city"所在的select标签对象
	var city = document.getElementById("city") ;
	//及时清空innerHTML的内容
	city.innerHTML = "" ;
	//判断当前籍贯的内容
	if(jiguan=="广东省"){
		//定义数组
		var arr  = ["广州市","惠州市","东莞市","深圳市"] ;
		//遍历数组获取到每一个城市
		for(var i = 0 ; i < arr.length; i++){
			//设置id="city"所在的标签对象的innerHTML属性拼接<option></option>
			city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>"
		}
	}
	
	if(jiguan=="陕西省"){
		//定义数组
		var arr  = ["西安市","咸阳市","宝鸡市","渭南市"] ;
		//遍历数组获取到每一个城市
		for(var i = 0 ; i < arr.length; i++){
			//设置id="city"所在的标签对象的innerHTML属性拼接<option></option>
			city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>"
		}
	}
	
	if(jiguan=="山西省"){
		//定义数组
		var arr  = ["大同市","太原市","运城市","吕梁市"] ;
		//遍历数组获取到每一个城市
		for(var i = 0 ; i < arr.length; i++){
			//设置id="city"所在的标签对象的innerHTML属性拼接<option></option>
			city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>"
		}
	}

}
</script>
	</head>
	<body>
<input type="button" value="点两下试试"  ondblclick="testDbClick()"/>
<br />
用户名:<input type="text" onblur="testBlur()" value="请输入4-14为的用户名" onfocus="testFocus()" id="username" />
<span id="usernameTip"></span><br />
<hr/>
籍贯:
<select id="jiguan" onchange="testChange()">
	<option value="请选择">请选择</option>
	<option value="广东省">广东省</option>
	<option value="陕西省">陕西省</option>
	<option value="山西省">山西省</option>
</select>
<select id="city">
	
</select>
	</body>
</html>

\u5f20\u7231\u9648

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件的分类

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>常用事件的分类</title><script>/** * js----->表单验证 * js事件的分类 * 1)和点击相关的事件 * onclick :单...
复制链接

扫一扫