首先把常用的几个事件列举如下
点击相关的：
单击： onclick
双击： ondblclick
焦点相关的：
聚焦： onfocus
失去焦点： onblur
选项相关的：
改变选项： onchange
鼠标相关的：
鼠标经过： onmouseover
鼠标移除： onmouseout
页面加载相关的：
页面加载： onload 这个事件是在加载完标签后再触发。通用用在body标签中，所以加载完body标签的内容触发。
下面是具体代码
function testClick(){
alert("触发了单击事件");
}
function testDblClick(){
alert("触发了双击事件");
}
function testFocus(){
//清空输入框的内容
var userName = document.getElementById("userName");
userName.value="";
}
function testBlur(){
//获取用户输入内容
var userName = document.getElementById("userName").value;
//检查用户是否存在
//显示内容到span
//获取到span
var userNameTip = document.getElementById("userNameTip");
if(userName=="eric"){
userNameTip.innerHTML = "用户已经被占用，请更改!".fontcolor("red");
}else{
userNameTip.innerHTML = "恭喜你，该用户可用！".fontcolor("green");
}
}
function testChange(){
//alert("选项改变了");
//获取选中的内容
var jiguan = document.getElementById("jiguan").value;
//alert(jiguan);
var city = document.getElementById("city");
//每次先清空城市select的内容
city.innerHTML = "";
if(jiguan=="广东"){
//把一些option选项放入到城市的select中
var arr = ["广州","珠海","深圳"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="广西"){
//把一些option选项放入到城市的select中
var arr = ["柳州","桂林","南宁"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(jiguan=="湖南"){
//把一些option选项放入到城市的select中
var arr = ["长沙","湘潭","郴州"];
for(var i=0;i<arr.length;i++){
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
}
function testOver(){
alert("鼠标经过了div");
}
function testOut(){
alert("鼠标移除了dvi");
}
function testLoad(){
alert("触发了onload方法");
}
</script>
</head>
<body οnlοad="testLoad()">
<input type="button" value="单击" οnclick="testClick()"/>
<input type="button" value="双击" οndblclick="testDblClick()"/>
<hr/>
请输入用户名：<input type="text" id="userName" value="4-12位字母或数字" οnfοcus="testFocus()" οnblur="testBlur()"/><span id="userNameTip"></span>
<hr/>
请选择籍贯
<!--onchange :表示这个select中的选项发送改变 -->
<select οnchange="testChange()" id="jiguan">
<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>
</select>
城市
<select id="city">
</select>
<hr/>
<div id="div1" οnmοuseοver="testOver()" οnmοuseοut="testOut()"></div>
</body>
</html>
扫一扫
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
