JavaScript ---[事件,Event对象]

Posted 2021-06-27 小智RE0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript ---[事件,Event对象]相关的知识，希望对你有一定的参考价值。

事件

为需要处理的事件编写相应的事件处理程序。要理解事件驱动和程序，就需要与非事件驱动的程序进行比较。实际上，现代的程序大多是事件驱动的，比如多线程的程序，肯定是事件驱动的。早期则存在许多非事件驱动的程序，这样的程序，在需要等待某个条件触发时，会不断地检查这个条件，直到条件满足，这是很浪费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>

在这里插入图片描述

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>

效果:

在这里插入图片描述

坐标位置案例:

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>

效果：

在这里插入图片描述

键盘事件案例

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>