<!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>