JavaScript (三) —[事件,Event对象]

时间:2021-6-19 作者:admin

目录


事件


为需要处理的事件编写相应的事件处理程序。要理解事件驱动和程序,就需要与非事件驱动的程序进行比较。实际上,现代的程序大多是事件驱动的,比如多线程的程序,肯定是事件驱动的。早期则存在许多非事件驱动的程序,这样的程序,在需要等待某个条件触发时,会不断地检查这个条件,直到条件满足,这是很浪费cpu时间的。而事件驱动的程序,则有机会释放cpu从而进入睡眠态(注意是有机会,当然程序也可自行决定不释放cpu),当事件触发时被操作系统唤醒,这样就能更加有效地使用cpu.

就是对用户的行为(例如,点击鼠标,按下键盘)进行响应.

常用的事件

事件 注释
onclick 鼠标左键点击;
ondblclick 鼠标左键双击;
onfocus 标签获得焦点(聚焦);(例如输入型的标签,在第一次进入时触发;在标签内再点击无效;移出后再进入才会第二次触发)
onblur 标签失去焦点(失焦); (例如输入型的标签;然后在焦点移出时触发)
onmouseover 鼠标被移到某标签之上;(鼠标悬浮事件)
onmouseout 鼠标从某标签移开;
onmousedown 鼠标按下标签
onload 在网页加载完毕后自动触发相应的的事件处理程序;(一般写在body标签内;)
onchange 当前标签失去焦点并且标签的内容发生改变时触发事件.
Onkeydown 键盘按下
Onkeyup 键盘抬起

案例练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		//案例
		//在这里写函数;
		function test1(){
			console.log("鼠标点击了");
		}
		function test2(){
			console.log("鼠标双击了");
		}
		function test3(){
			console.log("标签获得焦点");
		}
		function test4(){
			console.log("标签失去焦点");
		}
		function test5(){
			console.log("移入该标签");
		}
		function test6(){
			console.log("移出该标签");
		}
		function test7(){
			console.log("该标签失去焦点且内容被改变");
		}
		function test8(){
			console.log("键盘按下时触发");
		}
		function test9(){
			console.log("键盘抬起时触发");
		}
		</script>
	</head>
	<body>
		<!-- 使用按钮标签演示鼠标的点击和双击;左键点击按钮1时就会触发点击事件;双击按钮2时就会触发按钮的双击事件 -->
		<input type="button" onclick="test1()" value="点击该按钮1"/> <hr/> 
		<input type="button" ondblclick="test2()" value="双击该按钮2"/> <hr/>
		<!-- 使用文本框标签演示标签的焦点获得与失去 -->
		<input type="text" onfocus="test3()" onblur="test4()" /><hr/>
		<!-- 使用块级标签演示移入移出标签效果 -->
		<div onmouseover="test5()" onmouseout="test6()" style="width: 100px; background-color: chartreuse;">块标签</div>
		<!-- 使用文本框演示标签失去焦点且内容被改变; 当文本框失去焦点且文本框的内容被改变就会触发; -->
		<input type="text" onchange="test7()"  /> <hr/>
		<!-- 使用文本框演示键盘按下和抬起的事件;可以试着长按键盘某个键位;键盘按下事件就一直被执行;一旦松开那个键位就触发键盘抬起事件; -->
		<input type="text" Onkeydown="test8()"  Onkeyup="test9()"  /> <hr/>
	</body>
</html>

JavaScript (三) ---[事件,Event对象]



Event对象


在学习了鼠标或者键盘事件后;还需要为这些触发事件计算好预设位置;
Event 对象代表事件的状态,比如键盘按键的键位、鼠标的位置。
浏览器上端横向为X轴,左端竖向为y轴.

类型 注释
type 可获得被触发的事件类型
button 被点击的鼠标键位( 0:左键 ,1:滚轮;2:右键)
altKey 按下alt键位返回true;其他键返回false
ctrlKey 按下ctrl键位返回true;其他键返回false
shiftKey 按下shift键位返回true;其他键返回false
keyCode 返回被按下的键位编码;注意;返回的是编码值
offsetX 鼠标在当前标签内的X轴
offsetY 鼠标在当前标签内的Y轴
clientX 鼠标在浏览器内部X轴
clientY 鼠标在浏览器内部Y轴
screenX 鼠标在显示器内的X轴
screenY 鼠标在显示器内的Y轴

键位类型以及事件类型案例:
type和button

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
          //写一个函数统计鼠标的键位;
		  function test(a){
			  console.log(a.button);//获得被点击的键位(0:左键,1:滚轮,2:右键)
			  console.log(a.type);//获得事件类型
		  }
		</script>
	</head>
	<body>
		<!-- 使用鼠标按下按钮进行测试 -->
		<input type="button"  value="这是按钮"   onmousedown="test(event)"  />
	</body>
</html>

效果:

JavaScript (三) ---[事件,Event对象]


坐标位置案例:

offsetX 鼠标在当前标签内的X轴
offsetY 鼠标在当前标签内的Y轴
clientX 鼠标在浏览器内部X轴
clientY 鼠标在浏览器内部Y轴
screenX 鼠标在显示器内的X轴
screenY 鼠标在显示器内的Y轴

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			写一个函数统计鼠标的位置;
		  function test(a){
			  console.log("鼠标在当前标签内的X轴位置:"+a.offsetX+"->Y轴位置:"+a.offsetY);
			  console.log("鼠标在当前浏览器的X轴位置:"+a.clientX+"->Y轴位置:"+a.clientY);
			  console.log("鼠标在当前显示器内的X轴位置:"+a.screenX+"->Y轴位置:"+a.screenY);
		  }
		</script>
	</head>
	<body>
		<!-- 使用块级标签进行鼠标XY轴的测试; -->
		<div style="width: 200px; height: 150px; background-color: chartreuse;" onmousedown="test(event)">块级标签</div>
	</body>
</html>

效果:

JavaScript (三) ---[事件,Event对象]


键盘事件案例

altKey 按下alt键位返回true
ctrlKey 按下ctrl键位返回true
shiftKey 按下shift键位返回true
keyCode 返回被按下的键位编码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test0(a){
				console.log(a.keyCode);//获取按下的键位编码;
			}
			function test1(b){
				console.log(b.altKey);//按下alt键就返回true;按其他键返回false;
			}
			function test2(c){
				console.log(c.shiftKey);//按下shift键就返回true;按其他键返回false;
			}
			function test3(d){
				console.log(d.ctrlKey);//按下Ctrl键就返回true;按其他键就返回false;
			}
		</script>
	</head>
	<body>
		<!-- 使用文本框进行键盘事件测试 -->
		<input type="text"  onkeydown="test0(event)"/> <hr/>
		<input type="text"  onkeydown="test1(event)"/><hr/>
		<input type="text"  onkeydown="test2(event)"/><hr/>
		<input type="text"  onkeydown="test3(event)"/>
	</body>
</html>

效果:

JavaScript (三) ---[事件,Event对象]


声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。