【JavaWeb】JavaScript_事件编程

最新推荐文章于 2022-06-23 20:10:44 发布

Enjoy96

最新推荐文章于 2022-06-23 20:10:44 发布

阅读量313

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Enjoy96/article/details/79113584

版权

JavaWeb 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

事件编程

1.事件编程三要素：

（1）事件源：就是html标签

（2）监听器：实质就为一个函数，触发事件

（3）注册（绑定）监听器：根据不同的事件进行绑定——>onclick，ondbclick，onfocus，onblur

2.事件编程分类：

（1）与点击相关的

<1>单击事件 onclick

<2>双击事件 ondbclick

（2）与焦点相关的

<1>获取焦点 onfocus

<2>失去焦点 onblur

（3）与选项发生改变的事件

<1>下拉菜单 onchange 例如省市区县三级联动

（4）和页面加载有关的事件

<1>页面加载 onload 注：一般用在父标签body，body加载完就会触发 onload事件

（5）与鼠标相关的

<1>鼠标经过 onmouseover

<2>鼠标移出 onmouseout

点击相关的事件

1.单击事件：

（1）编写监听器

function checkClick(){

alert("触发了单击点击事件");

}

（2）绑定onclick监听器

2.双击事件：

（1）编写监听器

function checkDbClick(){

alert("触发了双击点击事件");

}

（2）绑定ondbclick监听器

例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>和点击相关的事件</title>
<script type="text/javascript">
	//编写监听器
	function checkClick(){
		alert("触发了单击点击事件...");	
	}
	
	function checkDbClick(){
		alert("触发了双击点击事件...") ;
	}
</script>
</head>

<body>
<input type="button" value="单击" οnclick="checkClick()" /><br/>
<input type="button" value="双击"  οndblclick="checkDbClick()" />
</body>
</html>

焦点相关的事件

作用：一般用于表单验证里面

1.获取焦点：onfocus

2.失去焦点：onblur

练习：与焦点相关的事件用于表单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>和焦点相关的事件</title>

</head>

<body>
用户名:<input type="text" value="4-16位数字或者字母" id="username" οnfοcus="testFocus()" οnblur="testBlur()" /><span id="userNameTip"></span>
</body>
<script type="text/javascript">

	//应用场景:一般情况用在表单验证里面
	//和获取焦点相关的
	
	function testFocus(){
		//获取id=username所在的标签对象	
		var username = document.getElementById("username") ;
		username.value = ""	 ;
	}
	
	//和失去焦点相关的
	function testBlur(){
		//获取用户输入的内容
		var username = document.getElementById("username").value ;
		//获取span标签对象
		var userNameTip = document.getElementById("userNameTip") ;
		//假设如果用户录入的是eric这个名字,那么就认为它是正确,否则错误给出提示
		if(username=="eric"){
			//就要给span标签对象设置innerHTML属性,表示符合规则,正确
			userNameTip.innerHTML = "用户名输入正确,符合的规则".fontcolor("green") ;
		}else {
			userNameTip.innerHTML = "不符合规则,请重新输入".fontcolor("red");
		}
	}
</script>
</html>

效果：当鼠标点击输入栏时，文字消失变为空，输入完毕鼠标移走时，进行验证确定是否符合规则

选项改变的事件

下拉菜单：onchange

练习：选择籍贯时，选完省自动切到对应的市

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项改变的事件</title>
</head>

<script type="text/javascript">
	
	function testChange(){
		//获取选择籍贯的实际内容,通过id属性获取选项内容
		var jiguan = document.getElementById("jiguan").value ;
		
		//获取id="city"所在的select标签对象
		var city = document.getElementById("city") ;
		
		//在每次选择的时候,要清空掉上次的内容
		city.innerHTML = ""	 ;
		
		//判断选择的是哪个籍贯的内容
		if(jiguan=="陕西"){
			//创建一个数组
			var arr = ["西安","宝鸡","渭南"] ;
			//遍历数组
			for(var i = 0 ; i <arr.length ; i++){
				//设置city所在的select的innerHTML属性

				// 将arr[0] 和arr[1] arr[2]的标签都加起来在city里显示

				city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
			}
		}
		
		if(jiguan=="广东"){
			//创建一个数组
			var arr = ["深圳","广州","珠海"] ;
			//遍历数组
			for(var i = 0 ; i <arr.length ; i++){
				//设置city所在的select的innerHTML属性
				city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
			}
		}
		
		if(jiguan=="山西"){
			//创建一个数组
			var arr = ["运城","大同","太原"] ;
			//遍历数组
			for(var i = 0 ; i <arr.length ; i++){
				//设置city所在的select的innerHTML属性
				city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
			}
		}
	}
	
</script>

<body>

籍贯:
<select id="jiguan" οnchange="testChange()">
	<option value="请选择">请选择<option>
    <option value="陕西">陕西<option>
    <option value="山西">山西<option>
    <option value="广东">广东<option>
</select>
城市:
<select id="city">
</select>

</body>
</html>

效果：

鼠标相关的事件

1.鼠标经过 onmouseover：

（1）编写监听器

function testMouseOver(){
alert("触发了鼠标经过的事件");
}

（2）绑定onmouseover监听器

<div id="div1" οnmοuseοver="testMouseOver()">我想吃烧烤啊，烤肉烤筋烤鱼柳麻辣小龙虾烤土豆烤韭菜</div>

2.鼠标移出 onmouseout

（1）编写监听器

function testMouseOut(){
alert("触发了鼠标经过的事件");
}

（2）绑定onmouseout监听器

<div id="div1" οnmοuseοut="testMouseOut()">我想吃烧烤啊，烤肉烤筋烤鱼柳麻辣小龙虾烤土豆烤韭菜</div>

练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标事件</title>
</head>

<style type="text/css">
	#div1{
		width:100px ;
		height:100px ;
		
		border:1px solid #000 ;
		
		background-color:#F00 ;	
	}
</style>

<script type="text/javascript">

	function testMouseOver(){
		alert("触发了鼠标经过的事件");	
	}
	
	
	function testMouseOut(){
		alert("触发了鼠标移出的事件") ;
	}

</script>

<body>

	<div id="div1" οnmοuseοver="testMouseOver()" οnmοuseοut="testMouseOut()">我想吃烧烤啊，烤肉 烤筋 烤鱼柳 麻辣小龙虾 烤土豆 烤韭菜</div>
</body>
</html>

效果：

Enjoy96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaWeb】JavaScript_事件编程

事件编程1.事件编程三要素：（1）事件源：就是html标签（2）监听器：实质就为一个函数，触发事件（3）注册（绑定）监听器：根据不同的事件进行绑定——>onclick，ondbclick，onfocus，onblur2.事件编程分类：（1）与点击相关的单击事件 onclick双击事件 ondbclick（2）与焦点相关的获取焦点 onfocus失
复制链接

扫一扫