JavaScript中事件编程的分类

最新推荐文章于 2022-12-27 13:06:14 发布

perfectmatch_G

最新推荐文章于 2022-12-27 13:06:14 发布

阅读量119

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/perfectmatch_G/article/details/89215771

版权

JS 专栏收录该内容

6 篇文章 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>

perfectmatch_G

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中事件编程的分类

事件编程中事件的分类：1.鼠标点击事件：单击：onclick / 双击：ondbclick2.和焦点相关的事件：聚焦事件：onfocus / 失去焦点事件：onblur3.选项卡发生变化的事件：onchange事件4.鼠标经过 / 移出事件：onmouseover / onmouseout5.页面加载事件：body中的内容加载完毕之后会执行的事件 onload<!DOCTYPE ...
复制链接

扫一扫

专栏目录