JavaScript中事件编程的分类

冷不防 2022-04-24 02:10 150阅读 0赞

事件编程中事件的分类：  
1.鼠标点击事件：单击：onclick / 双击：ondbclick  
2.和焦点相关的事件：聚焦事件：onfocus / 失去焦点事件：onblur  
3.选项卡发生变化的事件：onchange事件  
4.鼠标经过 / 移出事件：onmouseover / onmouseout  
5.页面加载事件：body中的内容加载完毕之后会执行的事件 onload

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>事件编程</title>
    		<style>
    			div{ 
    				height:150px;
    				width: 150px;
    				border: 1px solid darksalmon
    			}	
    		</style>
    		<script>
    			function testClick(){ 
    				alert("我点了...");
    			}
    			function testdblClick(){ 
    				alert("我双击了...");
    			}
    			function testFocus(){ 
    				var input = document.getElementById("username");
    				input.value="";
    			}
    			function testBlur(){ 
    				//获取文本输入框内容
    				var username = document.getElementById("username").value;
    				//获取span标签对象
    				var span = document.getElementById("username_Tip");
    				if(username!="eric"){ 
    					//设置span标签innerHTML属性
    					span.innerHTML = "用户名可用".fontcolor("yellow");	
    				}else{ 
    					span.innerHTML= "用户名不可用".fontcolor("red");
    				}
    			}
    			function change(){ 
    				//通过id属性获取select对象
    				//通过select获取选中的内容
    				var jiguan = document.getElementById("jiguan").value ;
    				var city = document.getElementById("city");
    				//选项卡变化之后应该将之前的值清空掉
    				city.innerHTML = "";
    				if(jiguan == "陕西省"){ 
    					var arr = ["西安市","咸阳市","宝鸡市"]; 
    					for(var i = 0;i<arr.length;i++){ 
    						//设置城市所在的innerHTML属性
    						city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
    					}
    				}
    				if(jiguan == "山西省"){ 
    					var arr = ["太原市","吕梁市","大同市"]; 
    					for(var i = 0;i<arr.length;i++){ 
    						//设置城市所在的innerHTML属性
    						city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
    					}
    				}
    				if(jiguan == "广东省"){ 
    					var arr = ["东莞市","广州市","深圳市"]; 
    					for(var i = 0;i<arr.length;i++){ 
    						//设置城市所在的innerHTML属性
    						city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>";
    					}
    				}
    			}
    			function testOnMouseOver(){ 
    				alert("触发了鼠标经过事件");
    			}
    			function testOnMouseOut(){ 
    				alert("触发了鼠标移出事件");
    			}
    		</script>	
    	</head>
    	<body>
    		<input type="button" value="点我" onclick="testClick()" />
    		<input type="button" value="点我两下" ondblclick="testdblClick()" />
    		<br />
    		用户名：<input type="text" id = "username" onblur= "testBlur()" onfocus="testFocus()" size="25" value="请输入4-14位的数字或字母" />
    			<span id = "username_Tip"></span>
    		<br />
    		籍贯：
    		<select onchange="change()" id = "jiguan">
    			<option value="请选择">请选择</option>
    			<option value="陕西省">陕西省</option>
    			<option value="山西省">山西省</option>
    			<option value="广东省">广东省</option>
    		</select>
    		城市：
    		<select id = "city"></select>
    		<br />
    		<div id= "div1"  onmouseout="testOnMouseOut()">这是div1的内容</div>
    	</body>
    </html>